HTML (Hyper Text Markup Language)
HTML documents must start with a document type declaration: <! DOCTYPE
html>. It helps browsers to display web pages correctly. It must only appear
once, at the top of the page (before any HTML tags). The <!
DOCTYPE> declaration is not case sensitive. The <! DOCTYPE> declaration for
HTML5 is: <! DOCTYPE html>
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
HTML element is defined by a start tag, some content, and an end tag.
<tagname>Content goes here...</tagname>
Examples:
<h1>My First Heading</h1>
<p>My first paragraph. </p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Some HTML elements have no content (like the <br> element). These elements are
called empty elements. Empty elements do not have an end tag!
HTML Attributes provide additional information about elements, are always
specified in the start tag and usually come in name / value pairs like
name="value"
Example
<a href="[Link] W3Schools</a>
<img src="img_girl.jpg" width="500" height="600" alt="Girl with a jacket">
<p style="color:blue;">This is a paragraph in blue color</p>
HTML headings (titles or subtitles)
<! DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Output:
Each HTML heading has a default size. However, programmer can specify the size for
any heading using CSS font-size property:<h1 style="font-size:60px;">Heading
1</h1>
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.
Code Output
HTML Display
Programmer cannot be sure how HTML will be displayed.
Large or small screens and resized windows will create different results.
With HTML, Programmer cannot change the display by adding extra spaces or
extra lines in your HTML code.
The browser will automatically remove any extra spaces and lines when the page is
displayed:
Code
Output
The HTML Style Attribute
It is used to add styles to an element, such as color, font, size, and more.
syntax: <tagname style="property:value;">
The property is a CSS property & value is a CSS value.
Examples
Set the background color for a page to powder blue:
Set background color for two different elements:
Set text color for HTML elements:
Define text size for HTML elements:
Define the horizontal text alignment for an HTML element:
Define the font to be used for an HTML element:
HTML Images
HTML <img> tag is used to embed an image in a web page.
The <img> tag creates a holding space for the referenced image.
Images are not technically inserted into a web page; images are linked to web
pages.
Syntax: <img src="url" alt="alternatetext">
src - Specifies the path to the image
alt - Specifies an alternate text for the image
HTML Page Title (describe the meaning of the page)
HTML Table
To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse
<style> table, th, td {border:1px solid black; border-collapse: collapse;}
</style>
HTML Lists