HTML – Hyper  Text  Markup  Language

View Github Repository Open presentation in a new window

cursor-education

See all presentation from cursor-education

HTML – Hyper  Text  Markup  Language

0 0

html-basics

On Github cursor-education / html-basics

HTML Basics

CubaSAN/ CURSOR Education School

HyperTextMarkupLanguage

HTML Document consists from tags

<h1 name="value">Content</h1>

<input name="value" />

<!DOCTYPE definition>

<p><p>

<p id="paragraph"><p>

<p id="paragraph" class="lorem"><p>

<br />

DOCTYPE

HEAD

BODY

<!DOCTYPE html>

OLD DOCTYPES

HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Rules of XHTML

  • All tags and their attributes must be typed in lower case;
  • The value of any attribute must be enclosed in quotation marks;
  • You must close all tags, even those that do not have a closing tag;
  • Must follow the rules of correct tags nesting;
  • You can not use a shortened tag attributes (without the quotes);
  • Instead attribute name in certain situations should be used id;
  • Always specify <!DOCTYPE>

Browsers

  • Chrome
  • Firefox
  • Safari
  • Internet Explorer
  • Other

Quirks mode

Quirks mode

HEAD

  • <title> (this element is required in an HTML document)
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <meta charset="UTF-8">
  • <meta name="description" content="">
  • <meta name="keywords" content="">
  • <meta name="author" content="">

Global Attributes

Attribute Description accesskey Specifies a shortcut key to activate/focus an element class Specifies one or more classnames for an element (refers to a class in a style sheet) contenteditable Specifies whether the content of an element is editable or not
contextmenu Specifies a context menu for an element. The context menu appears when a user right-clicks on the element data-* Used to store custom data private to the page or application dir Specifies the text direction for the content in an element
draggable Specifies whether an element is draggable or not dropzone Specifies whether the dragged data is copied, moved, or linked, when dropped hidden Specifies that an element is not yet, or is no longer, relevant
id Specifies a unique id for an element lang Specifies the language of the element's content spellcheck Specifies whether the element is to have its spelling and grammar checked or not
style Specifies an inline CSS style for an element tabindex Specifies the tabbing order of an element title Specifies extra information about an element translate Specifies whether the content of an element should be translated or not

Block and inline element

Block elements occupy all available width of container, height of these component is determined by its content, and it always starts on a new line.

Inline elements are directly part of another element, such as a text paragraph. They are mainly used to change the appearance of text or a logical selection.

You can not insert an block elements into inline elements according to specification (eg <h1> in <a>).

Headings

  • <h1>My Title</h1>
  • <h2>My Title</h2>
  • <h3>My Title</h3>
  • <h4>My Title</h4>
  • <h5>My Title</h5>
  • <h6>My Title</h6>

Headings

Headings

Headings

Headings

<h2>Headings</h2>
<h3>Headings</h3>
<h4>Headings</h4>

Paragraph

  • <p>My Paragraph</p>

some other block elements

  • <pre>Preformatted text</pre>
  • <address>NOT post address</address>
  • <bloquote>Quoted text</bloquote>

Links

  • <a href="www.rostov.nah" target="_blank">Where is the president should go?</a>

Links

Ordered list:

                    Where is the president should go?
<a href="www.rostov.nah" target="_blank">Where is the president should go?</a>

some other inline elements

  • <sub>just text</sub>
  • <sup>just text</sup>
  • <del>just text</del>
  • <code>just text</code>
  • <q>just text</q>
  • <cite>just text</cite>

some other inline elements

  • <b>just text</b>
  • <strong>just text</strong>
  • <i>just text</i>
  • <em>just text</em>

some other inline elements

  • <br />
  • <hr />

Lists

Ordered list:

                    Firts item
                        Second item
<ol>
<li>Firts item</li>
<li>Second item</li>
</ol>

Lists

Unordered list:
  • Firts item
  • Second item
<ul>
<li>Firts item</li>
<li>Second item</li>
</ul>

Images
<img src="img/starwars.jpg" alt="Starwars" />

Tables

<table> It is used as a container for elements that define the contents of the table. Every table has a rows and cells are set using tags <tr> and <td>. Inside <table> it is permissible to use the following elements: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, colspan attribute is used to conbine neighboring columns in the table rowspan - to combine rows.

Tables
Bus number Price 3А 3 hrn 25 133 4 hrn
<table class="table-demo">
 <thead>
  <tr>
   <th>Bus number</th>
   <th>Price</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>3А</td>
   <td rowspan="2">3 hrn</td>
  </tr>
  <tr>
   <td>25</td>
  </tr>
  <tr>
   <td>133</td>
   <td>4 hrn</td>
  </tr>
 </tbody>
</table>

Elements with no semantic meaning

These tags are designed to highlight the portion of the document to change the appearance of the content but without creating additional semantic value fragment.

<div> - block element

<span> - inline element

Validator Can I use
W3Schools MDN Htmlbook Htmldoctor
Thank you!
Questions