HTML Basic Steps PDF

Download as pdf or txt
Download as pdf or txt
You are on page 1of 2

HTML

(Hyper Text Markup Language)


HTML IS THE STANDARD MARKUP LANGUAGE FOR CREATING WEB PAGES.

HTML Editors

1. Open Notepad (PC) → Open Start > Programs > Accessories > Notepad
In Notepad you can writte HTML
2. Save the file on your computer. Select File > Save as in the Notepad menu. Name the
file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML
files).
You have to save it in this way in order to see your HTML web in your browser

HTML Basic

The HTML basic structure is:

1. The <!DOCTYPE> declaration represents the document type, and helps browsers to display
web pages correctly. It must only appear once, at the top of the page (before any HTML tags).
2. The <html> element defines the whole document. It has a start tag <html> and an end tag
</html>. The element content is another HTML element (the <body> element).
3. The <body> element defines the document body. It has a start tag <body> and an end tag
</body>.
4. The <p> element defines a paragraph. It has a start tag <p> and an end tag </p>.

1
5. HTML headings are defined with the <h1> to <h6> tags.
6. <h1> defines the most important heading. <h6> defines the least important heading

HTML Links and Images

1. HTML links are defined with the <a> tag. Example:


<a href="https://www.w3schools.com">This is a link</a>
2. HTML images are defined with the <img> tag. The source file (src), alternative text (alt),
width, and height are provided as attributes. Example:
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Styles

1. The background-color property defines the background color for an HTML element. This
example sets the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

2. The color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

3. The font-family property defines the font to be used for an HTML element:

<h1 style="font-family:verdana;">This is a heading</h1>


<p style="font-family:courier;">This is a paragraph.</p>

4. The font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>


<p style="font-size:160%;">This is a paragraph.</p>

5. The text-align property defines the horizontal text alignment for an HTML element:

<h1 style="text-align:center;">Centered Heading</h1>


<p style="text-align:center;">Centered paragraph.</p>