HTML
- HTML -HyperText Markup Language
- HTML is Not An Programming Language It's An Standard Markup Language For Documents Designed to be displayed in a Web Browser
- It Contains Skelton and It Describes the Structure of the Web Page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
TAGS:
< Open Tag
> Close Tag
Basic Syntax:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading Tag</h1>
<p> Paragraph Tag</p>
</body>
</html>
- The <!DOCTYPE html> declaration defines that this document is an HTML5 document
- The <html> element is the root element of an HTML page
- The <head> element contains Header-information about the HTML page
- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
- The <body> element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- The <h1> element defines a large heading
- The <p> element defines a paragraph
- All HTML documents must start with a document type declaration: <!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>.
<body>
<h1>First Heading</h1>
<p> First paragraph.</p>
</body>
</html>
- The <!DOCTYPE> declaration represents the document type
- helps browsers display web pages correctly.
- It must only appear once, at the top of the page
- The <!DOCTYPE> declaration is not case-sensitive.
- HTML Heading Tags Are Defined With <h1> to <h6> Tags.
- Paragraph Tag Defines With <p> Tag.
- It's Specified with the "href" attribute
- Images are Defined With <img> tag it Refers Image
Heading 1---<h1>
Heading 2 --- <h2>
Heading 4 --- <h4>
Heading 5 --- <h5>
Heading 6 --- <h6>
HTML HORIZONTAL:
The <hr> element is used to separate content in an HTML page
EX:
<h1> heading 1</h1>
<p>Paragraph</p>
<hr>
<h2> heading 2</h2>
<p>Paragraph</p>
<hr>
HTML BREAKS:
<br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph
EX:
<p>This is<br>a paragraph<br>with line breaks.</p>
HTML PREFORMATTED TEXT:
The HTML <pre> element defines preformatted text.
The text inside an <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML STYLES:
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
HTML TEXT COLOR:
The CSS color property defines the text color for an HTML element
EX:
<h1 style="color:blue;">This is heading</h1>
<p style="color:red;">This is paragraph.</p>
HTML FONTS:
The CSS font-family property defines the font to be used for an HTML element
EX:
<h1 style="font-family: Verdana;">This is heading</h1>
<p style="font-family:courier;">This is paragraph.</p>
HTML TEXT SIZE:
font-size property defines the text size for an HTML element<p style="font-size:160%;">This is paragraph.</p>
HTML TEXT ALIGNMENT:
text-align property defines the horizontal text alignment for an HTML element<p style="text-align:center;">Centered paragraph.</p>
HTML TEXT FORMATTING:
<b>- Bold text<strong>- Important text<i>- Italic text<em>- Emphasized text<mark>- Marked text<small>- Smaller text<del>- Deleted text<ins>- Inserted text<sub>- Subscript text<sup>- Superscript text
<b> element defines bold text, without any extra importance.<strong> element defines text with strong importance. The content inside is typically displayed in bold.<em> element defines emphasized text. The content inside is typically displayed in italic.<small> element defines smaller text<mark> element defines the text that should be marked or highlighted<del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text<ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text<sub> element defines subscript text. Subscript text appears half a character below the normal line and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O<sup> element defines superscript text. Superscript text appears half a character above the normal line and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]HTML QUOTATION AND CITATION ELEMENTS :
<blockquote> element defines a section that is quoted from another source.Browsers usually indent <blockquote> elements
EX:
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">For 60 years, WWF has worked to help people and nature thrive. WWF is the world's leading conservation organization in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
</blockquote>
<q> tag defines a short quotation.Browsers normally insert quotation marks around the quotation.
EX:
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
HTML <abbr> :
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation systems, and search engines.
EX:
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <address> :
The HTML <address> tag defines the contact information for the author/owner of a document or an article.
The contact information can be an email address, URL, physical address, phone number, social media handle, etc.
The text in the <address> element usually renders in italics, and browsers will always add a line break before and after the <address> element.
EX:
<address>
Written by John Doe.<br>Visit us at:<br>
Example. com<br>
Box 564, Disneyland<br>
USA
</address>
<cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).<cite> element usually renders in italics.EX:
The HTML <bdo> tag is used to override the current text direction
EX:
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML COMMENTS:
HTML COMMENTS TAG:
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
HIDE CONTENT:
<!-- <p>This is another paragraph </p> -->
<p>This is a paragraph too.</p>
<!-- and the --> will be hidden from the display<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>