HTML


Hyper Text Markup Language


Website layers



HTML


  • Text (file/stream) containing markup tags
  • Markup tags tell the browser how to display the page
  • The HTML structure

Simple HTML page

<html>
<head>
    <title>title of the page</title>
    <meta charset="utf-8">
</head>
<body>
    this is my first page. <b>this text is bold</b>
</body>
</html>





html dom tree

  • When a web page is loaded, the browser creates a Document Object Model of the page
  • The HTML DOM model is constructed as a tree of Objects

HTML Elements


  • HTML tags are used to mark-up HTML elements
  • HTML tags are surrounded by the two characters < and >
  • The surrounding characters are called angle brackets
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The text between the start and end tags is the element content
  • HTML tags are not case sensitive, <b> means the same as <B>

headings

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

Paragraphs


<p>This is a paragraph</p>
<p>This is another paragraph</p>




Basic HTML TagS

  • Line Breaks
 <p>This <br> is a para<br>graph with line breaks</p>
  • Comments in HTML
 <!-- This is a comment -->

<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule

HTML Text Formatting

<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

Most of these elements are not used anymore. Text formatting is usually done using CSS

"Computer output" tags


<code> Defines computer code text
<kbd> Defines keyboard text 
<var> Defines a variable
<pre> Defines preformatted text

HTML CHARACTER entities

    non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" quotation mark &quot; &#34;
' apostrophe &apos; &#39;
¢ cent &cent; &#162;
§ section &sect; &#167;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
× multiplication &times; &#215;
÷ division &divide; &#247;
™ trademark &trade; &#8482;

Links


  • The Anchor Tag and the Href Attribute
<a href="url">Text to be displayed</a>
<a href="http://www.microsoft.com">Visit Microsoft!</a>

  • The Target Attribute
<a href="http://www.microsoft.com" target="_blank">    Visit Microsoft!</a>

tables

  • Defined with the <table> tag, divided into rows (<tr> tag) and data cells (with the <td> tag) 
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>



HTML LIsts

  • Unordered Lists
<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

  • Ordered Lists
<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

    1. i'm an ordered list item 1
    2. i'm an ordered list item 2

HTML forms


  • HTML Forms are used to select different kinds of user input
    • A form is defined with the <form> tag


Input

  • Text Fields
<form>
    First name: <input type="text" name="firstname">
    <br />
    Last name: <input type="text" name="lastname">
</form>

form tags

<form> Defines a form for user input
<input> Defines an input field
<textarea> Defines a text-area
                              (a multi-line text input control)
<label> Defines a label to a control
<select> Defines a selectable list (a drop-down box)
<option> Defines an option in the drop-down box
<button> Defines a push button

images


  • The syntax of defining an image: 
<img src="url">

  • The Alt Attribute 
<img src="boat.gif" alt="Big Boat">

HTML colors


  • Colors are displayed combining RED, GREEN, and BLUE 
  • Values vary from 00 to FF (hexadecimal)



html colors



HTML STYLEs

  • External style sheet
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


  • Internal style sheet
 <head>
    <style type="text/css">
        body {
            background-color: red;
        }
        p {
            margin-left: 20px;
        }
    </style>
</head>

html Styles

  • Inline styles
<p style="color: red; margin-left: 20px">
    This is a paragraph
</p>




html head

  • According to the HTML standard, only a few tags are legal inside the head section

<head> Defines information about the document
<title> Defines the document title
<link> Defines a resource reference
<meta> Defines meta information
<!DOCTYPE> Defines the document type
                                       This tag goes before the <html> start tag.

HTML Meta

  • Keywords for search engine

    • Defining a description for your page
<meta name="description" content="Web tutorial">

    • Defining keywords for your page
<meta name="keywords" content="HTML, JavaScript, VBScript">




HTML scripts

  • A script in HTML is defined with the <script> tag

<html>
    <head></head>
    <body>
        <script type="text/javascript">
            document.write("Hello World!")
        </script>
    </body>
</html>


CSS

cascading style sheets

  • CSS is used to control the style and layout of multiple Web pages all at once.
  • With CSS, all formatting can be removed from the HTML document and stored in a separate file

Rules




selectors



2 rules



2 rules




specificity

  • When more than one selector apply style on an element, which one wins?


DESCENDANT Selector



JQuery overview


HTML

By Ami Turgman

Made with Slides.com

HTML

  • 1,097

More from Ami Turgman