Scribd
Upload
3 views

HTML CSS Notes

The document provides instructions for installing the 'Live Server' extension in Visual Studio Code to launch a local server for validating HTML pages. It explains how to create a project, the difference between static and dynamic websites, and the use of HTML elements and attributes. Additionally, it highlights the importance of JavaScript for building dynamic web applications and its compatibility with both client-side and server-side environments.

Uploaded by

vamsivoonna8
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

HTML CSS Notes

The document provides instructions for installing the 'Live Server' extension in Visual Studio Code to launch a local server for validating HTML pages. It explains how to create a project, the difference between static and dynamic websites, and the use of HTML elements and attributes. Additionally, it highlights the importance of JavaScript for building dynamic web applications and its compatibility with both client-side and server-side environments.

Uploaded by

vamsivoonna8
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Install this ‘Live Server’ extension, this extension is very helpful to Launch the

Local server on our machine, with this extension a Local server will be launched
and we can easily validate our HTML pages.

Create a Project in VS :
Click on ‘Explorer’ section / Click on ‘File’ which is on top -> click on
“Open Folder”-> Choose the Project location that where it has to store / create a
New Folder and choose that folder to store the Project -> click on ‘Select Folder’
(Now we can see that folder is opened on our VS Code)
(or)
Select Folder -> type “cmd” -> In Command Prompt, type “code .”
(Now we can see that folder is opened on our VS Code)

=> As soon as you enter ‘exclamation (!)’ the intelligence will show you the two
different
options, you have to make sure that you are using the first option here. As soon
as you are
taking first option the vs code will insert this dummy code for you.

 As soon as you click on Live server /go Live option, your file will get open on the local
server
(i.e This live server have launched one local server on your machine )

A Browser is must to open any website.


URL -> Uniform Resource Locator (Address of the website)
Example URLs : www.amazon.in , www.flipkart.com

A Browser will understand only :


HTML
CSS
JavaScript
The key difference between static websites vs dynamic websites is that static websites have
stable content, where every user sees the exact same thing on each individual page (like a
privacy policy), whereas dynamic websites pull content on-the-fly, allowing its content to
change with the user.
<title> -> used to give the name to your web page.
<head> -> put the documentation details and put the linkage.
<body> -> put what you actually want on the web page.
<p> -> stands for Paragraph.
<h1> ,…<h6> -> stands for heading.

With the help of Live server extension, we do not have to manually go and refresh the page. We just
have to save the changes on your vs code and the page is automatically refreshed.
(As we are running the Local server on our machine what will happen is as soon as we go and save this
file the local server will go and refresh the page.)

Attributes : Attributes provide additional information about the HTML element.


Ex: Coloar, Text, Size, Shape, Underlines etc.
<img> -> used to display the image.
Src, alt are attributes of <img> element.
Src (source) -> specify the location of the image.
alt -> if you don’t have the access of the image that you are retrieving then in such scenario, if you
want to show the message to the user then we go and specify that message using alt attribute.

( Go to google ‘copy image address’)

<div> (Div block)-> to divide the page into multiple sections. it will take the one section of our page
Block level elements -> <h1>..<h6> , <p>
The next element to this Block level element will display in next of that.

Inline Html elements -> ex: <span>, <a>, <img>


The next element to this Block level element will display on the same line of it.
It will adjust the width as per your requirements.

** Block level elements always starts with the new line and inline elements always starts with the
existing line.

We can use Inline element in Block level element.


Ex: <p> Block level element <span>Inline Element</span> </p>

Anchor tag defines a hyperlink. It has a required attribute href that defines the destination link.
Image tag -> used to insert images in the HTML documents.

without data-*
with data-*

We can use this data attribute with any HTML elements.

Whenever we have to store any private data that is specific to the page or an application we can use
this data attribute.

We can access this data attribute in the Javascript.

Wherever we have to access any kind of a data in the javascript we can access these data attributes as
well.

https://www.w3schools.com/cssref/pr_class_float.php
This is one way of providing CSS, this is refered has ‘Inline Css’.

In Internal styling, In header section itself we can write down the CSS.
Class and Id is also Attribute
For class, we have to use dot operator.

Element, element,.. ex: h1,p{Color : blue;}


Different CSS Properties :
Font-family :
..
By default, HTML Buttons come with border in the browsers.
Border-width :0px ; (removes border )

=> Dynamic Web applications are like User specific.


(( i.e. a) personalised content : instagram feed, video
recommendations,
b) Real time : cricket score updates,Traffic Updates,
c) User-Interactivity : Data Validations(Form)
))

To build Dynamic Web applications , we need : a) Client server communication,


b) Manipulating HTML & CSS,
c) Writing Application Logic
=> We can achieve with using JavaScript and using Web Assembly Language
To Manipulate
Html & CSS and also to write Application Logic .

=> why Javascript ?


JavaScript is the most popular programming language which is adopted
and
understood by all the major browsers.

-> can be used in both client-side(in web browsers) and server-side(with platforms
like
Apex(Salesforce), Node.js ).

=>

---

https://www.linkedin.com/feed/update/urn:li:activity:7256235695168487424/?updateEntityUrn=urn
%3Ali%3Afs_updateV2%3A%28urn%3Ali%3Aactivity%3A7256235695168487424%2CFEED_DETAIL
%2CEMPTY%2CDEFAULT%2Cfalse%29

You might also like