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    

< less than < <

> greater than > >

& ampersand & &

" quotation mark " "

' apostrophe ' '

¢ cent ¢ ¢

§ section § §

® registered trademark ® ®

× multiplication × ×

÷ division ÷ ÷

™ trademark ™ ™

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>

i'm an ordered list item 1
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

JQuery