HTML — Part -1
1991- Tim Berners-Lee invented HTML
2008 - WHATWG HTML5 First Public Draft
<!DOCTYPE html>
This makes sure the document will be parsed the same way by different browsers by adding the doctype declaration.
Other options for doctype:-
- math
- svg
Types of DOCTYPE-
- strict
- transitional
- frameset (the body tag is replaced by frameset)
HTML Headings
<h1> to <h6>
HTML Paragraphs
<p>This is a paragraph.</p>HTML Links
<a href="https://###.com">This is a link</a>HTML Images
<img src="123.jpg" alt="123.com" width="104" height="142">HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here…</tagname>
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
eg- <body>
Empty HTML Elements
HTML elements with no content are called empty elements.
eg- The <br> tag defines a line break
HTML is Not Case Sensitive
<P> means the same as <p>.
HTML Attributes
- provide additional information about HTML elements.
- are always specified in the start tag
- usually come in name/value pairs like: name=”value”
The href Attribute
The href attribute specifies the URL of the page the link
<a href=”https://www.###.com">Visit the link</a>
The src Attribute
The src attribute specifies the path to the image to be displayed:
<img src=”img_girl.jpg”>
2 ways to specify the URL :-
- Absolute URL — Links to an external image that is hosted on another website.
- 2. Relative URL — Links to an image that is hosted within the website.
The width and height Attributes
specifies the width and height of the image (in pixels)
<img src=”img_girl.jpg” width=”500" height=”600">
The alt Attribute
- it is required attribute in
<img>tag. - specifies an alternate text for an image, if the image for some reason cannot be displayed.
<img src=”img_girl.jpg” alt=”Girl with a jacket”>
The style Attribute
The style attribute is used to add styles to an element
<p style=”color:red;”>This is a red paragraph.</p>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page
<html lang=”en”>
<html lang=”en-US”>
The title Attribute
The value of the title attribute will be displayed as a tooltip when you mouse over the element
<p title=”I’m a tooltip”>This is a paragraph.</p>
Always Use Lowercase Attributes & Always Quote Attribute Values
HTML Headings
<h1> to <h6> tags.
Search engines use the headings to index the structure and content of your web pages.
Note: Use HTML headings for headings only. Don’t use headings to make text BIG or bold.
HTML Paragraphs
The HTML <p> element defines a paragraph.
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
You 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:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
HTML <pre> tag
The HTML <pre> element defines preformatted text. It preserves both spaces and line breaks.
<pre>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</pre>
HTML Horizontal Rules
The <hr> element is used to separate content
<p>This is some text.</p>
<hr><p>This is some other text.</p>
HTML Line Breaks
The HTML <br> element defines a line break.
<p>This is<br>a paragraph<br>with line breaks.</p>
HTML Styles
Adds style to the elements, such as color, font, size, and more.
<tagname style="property:value;">- Use
background-colorfor background color - Use
colorfor text colors - Use
font-familyfor text fonts - Use
font-sizefor text sizes - Use
text-alignfor text alignment
<h1 style="background-color:blue;font-size:300%; text-align:center;">This is a heading</h1><p style="color:blue; font-family:courier;text-align:right;">This is a paragraph.</p>
HTML Text Formatting
Formatting elements were designed to display special types of text:
<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
<p>This text is normal.</p><p><b>This text is bold.</b></p>
<strong>This text is important!</strong><br>
<i>This text is italic.</i><br>
<em>A screen reader will pronounce the words in <em> with an emphasis</em>
<small>This is some smaller text.</small>
<p>defines text that should be <mark>marked</mark> or <mark>highlighted</mark>.</p>
<p>text that has been <del>deleted</del> from a document</p>
<p>text that has been <del>deleted</del> <ins>inserted</ins> into a document.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
HTML Quotation and Citation Elements
<abbr>— Defines an abbreviation or acronym<address>— Defines contact information for the author/owner of a document<bdo>— Defines the text direction<blockquote>— Defines a section that is quoted from another source<cite>D — efines the title of a work<q>— Defines a short inline quotation
<blockquote>
<p>Browsers usually indent blockquote elements.</p><blockquote cite="http://www.worldwildlife.org/who/index.html">
For nearly 60 years, WWF has been protecting the future of nature.
</blockquote>
<q>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<abbr>
Marking abbreviations can give useful information to browsers, translation systems and search-engines.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<address>
- defines the contact information for the author/owner of a document or an article.
- usually renders in italic
- browsers will always add a line break before and after the
<address>element.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<cite>
defines the title of a creative work
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<bdo> for Bi-Directional Override
used to override the current text direction
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Comment Tag
<! — Write your comments here →
<p>This <! — great text → is a paragraph.</p>
SOURCES: -
