HTML

What is HTML? HTML is a language for describing web pages. * HTML stands for Hyper Text Markup Language * HTML is not a programming language, it is a markup language * A markup language is a set of markup tags * HTML uses markup tags to describe web pages

The structure of html file

HTML Tags HTML markup tags are usually called HTML tags

* HTML tags are keywords surrounded by angle brackets like <html> * 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 * Start and end tags are also called opening tags and closing tags. HTML Documents - Web Pages * HTML documents describe web pages * HTML documents contain HTML tags and plain text * HTML documents are also called web pages The purpose of a web browsers (like Internet Explorer) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page: HTML Example <html> <body> <h1>My First Heading</h1> <p>My first paragraph</p> </body> </html> Example Explained * The text between <html> and </html> describes the web page * The text between <body> and </body> is the visible page content * The text between <h1> and </h1> is displayed as a heading * The text between <p> and </p> is displayed as a paragraph

Basic HTML Tags:

• HTML Headings HTML headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<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>

The result:

• HTML Paragraphs HTML paragraphs are defined with the <p> tag. Note: Browsers automatically adds an empty line before and after paragraphs. Don't Forget the End Tag.

<p>This is a paragraph</p>

<p>This is another paragraph</p>

The result:

This is a paragraph

This is another paragraph

Paragraph alignment:

< p align =" left " > Left aligned paragraph < / p >

< p align =" center " > Centered paragraph < / p >

< p align =" right " > Right aligned paragraph < / p >

The result:

• HTML Line Breaks Use the <br /> tag if you want a line break (a new line) without starting a new paragraph: The <br> tag is an empty tag. It has no closing tag.

<p>This <br> is a para<br>graph with line breaks</p>

The result:

This

is a para

graph with line breaks

Tag Description

<html>

Defines an HTML document

<body>

Defines the document's body

Defines header 1 to header 6

<p>

Defines a paragraph

<br>

Inserts a single line break

HTML Text Formatting

HTML defines a lot of elements for formatting output, like bold or italic.

HTML Formatting Tags This example demonstrates how you can format text in an HTML document.

<html>

<body>

<br>

<strong>This text is strong</strong>

<br>

<br>

<em>This text is emphasized </em>

<br>

<i>This text is italic</i>

<br>

<small>This text is small</small>

<br>

This text contains

<sub>subscript </sub>

<br>

This text contains

<sup>superscript</sup>

</body>

</html>

The result:

This text is bold

This text is strong

This text is big

This text is emphasized

This text is italic

This text is small

This text contains subscript

This text contains superscript

Tag Description

<b>

Defines bold text

<big>

Defines big text

<em>

Defines emphasized text

<i>

Defines italic text

<small>

Defines small text

Defines strong text

<sub>

Defines subscripted text

<sup>

Defines superscripted text

<ins>

Defines inserted text

HTML Fonts

The HTML <font> Tag

With HTML code like this, you can specify both the size and the type of the browser output :

<p>

This is a paragraph.

</font>

</p>

<p>

This is another paragraph.

</font>

</p>

Font Attributes

Attribute Example Purpose

size="number" size="2" Defines the font size

size="+number" size="+1" Increases the font size

size="-number" size="-1" Decreases the font size

face="face-name" face="Times" Defines the font-name

color="color-value" color="#eeff00" Defines the font color

color="color-name" color="red" Defines the font color

HTML Images

The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image:

The URL points to the location where the image is stored.

<html>

<body>

<p>

<img src ="hackanm.gif"

align ="left" width="48" height="48">

A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.

</p>

<p>

<img src ="hackanm.gif"

align ="right" width="48" height="48">

A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.

</p>

</body>

</html>

The result :

Background Color <body style="background-color:yellow">

Or <body bgcolor="yellow" > The style attribute defines a style for the <body> element.

HTML Links

A link is the "address" to a document (or a recourse) on the web. HTML links are defined with the <a> tag. <a href="http://www.w3schools.com">This is a link</a> Note: The <a> tag contains an attribute (href) to provide the link address. Tables Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. <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> How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Tables and the Border Attribute If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. To display a table with borders, you will have to use the border attribute: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

Heading Another Heading

row 1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

Headings in a Table Headings in a table are defined with the <th> tag. <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <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> How it looks in a browser:

Empty Cells in a Table Table cells with no content are not displayed very well in most browsers. <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></td> </tr> </table> How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1

Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border). To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible: <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> </td> </tr> </table> How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1

Table cells that span more than one row/column

This example demonstrates how to define table cells that span more than one row or one column.

<html>

<body>

<h4>Cell that spans two columns:</h4>

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>Cell that spans two rows:</h4>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telephone:</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

HTML Frames With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: * The web developer must keep track of more HTML documents * It is difficult to print the entire page The Frameset Tag * The <frameset> tag defines how to divide the window into frames * Each frameset defines a set of rows or columns * The values of the rows/columns indicate the amount of screen area each row/column will occupy The Frame Tag * The <frame> tag defines what HTML document to put into each frame In the example below we have a frameset with two columns. The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The HTML document "frame_a.htm" is put into the first column, and the HTML document "frame_b.htm" is put into the second column: <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset> Note: The frameset column size value can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space (cols="25%,*"). Basic Notes - Useful Types If a frame has visible borders, the user can resize it by dragging the border. To prevent a user from doing this, you can add noresize="noresize" to the <frame> tag. Frame Tags

Tag Description

<frameset> Defines a set of frames

<frame> Defines a sub window (a frame)

<noframes> Defines a noframe section for browsers that do not handle frames

Vertical frameset

This example demonstrates how to make a vertical frameset with three different documents.

<html>

</frameset>

</html >

Horizontal frameset

This example demonstrates how to make a horizontal frameset with three different documents.

<html>

</frameset>

</html>

How to use the <noframes> tag

This example demonstrates how to use the <noframes> tag.

<html>

<body>Your browser does not

handle frames!</body>

</noframes>

</frameset>

</html>

Mixed frameset

This example demonstrates how to make a frameset with three documents, and how to mix them in rows and columns.

<html>

</frameset>

</html

Cascading Style Sheet

• CSS stands for Cascading Style Sheets.

• Styles define how to display HTML elements.

• Styles are normally stored in Style Sheets.

• Styles were added to HTML 4.0 to solve a problem.

The Basics of CSS: Tags, Selectors, and Declarations

• In order for your style sheet to properly display your Web page, you must attach the Web document to a style sheet.

• Attaching the style sheet can be done by adding this HTML tag into the Web page’s source code: <STYLE TYPE=“text/css”>.

• Close the tag with </STYLE>. Styles should be set right before the <BODY> tag.

Applying CSS

There are three ways to apply CSS to HTML.

1. In-line

• In-line styles are plonked straight into the HTML tags using the style attribute.

• An inline style should be used when a unique style is to be applied to a single occurrence of an element.

• To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph: <p style="color: red; margin-left: 20px"> This is a paragraph </p>

Example:

<html>

<body>

</body>

</html>

2.Internal

Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page.

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag.

Example:

<html>

<head>

h1 {color: #00ff00}

h2 {color: #dda0dd}

p {color: rgb(0,0,255)}

</style>

</head>

<body>

<h1>This is header 1</h1>

<h2>This is header 2</h2>

<p>This is a paragraph</p>

<h1> TELECOMMUNICATION </h1>

<h3> TELECOMMUNICATION </h3>

</body>

</html>

Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are left with our saviour...

3. External

External styles are used for the whole, multiple-page website. There is a separate CSS file.

• External Style Sheets can save you a lot of work

• External Style Sheets are stored in CSS files

• Multiple style definitions will cascade into one

• An external style sheet is ideal when the style is applied to many pages.

• With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section.

Example:

h1 {font-family:verdana,helvetica,sans serif;

font-weight:bold;font-color:red}

If this file is saved as "web.css" then it can be linked to in the HTML like this:

<html>

<head>

<title> title of page CSS</title>

</head>

<body>

</body>

</html>

Save the HTML file. This now links to the CSS file.

CSS Selectors, Properties, and Values

Whereas HTML has tags, CSS has 'selectors'. Selectors are the names given to styles in internal and external style sheets.

For each selector there are 'properties' inside curly brackets, which simply take the form of words such as color, font-weight or background-color.

A value is given to the property following a colon (NOT an 'equals' sign) and semi-colons separate the properties.

body {

font-size: 0.8em;

color: navy;

}

This will apply the given values to the font-size and color properties to the body selector.

colours

CSS brings 16,777,216 colours to your disposal. They can take the form of a name, an rgb (red/green/blue) value or a hex code.

red

Is the same as

rgb(255,0,0)

Which is the same as

rgb(100%,0%,0%)

Which is the same as

#ff0000

Which is the same as

#f00

There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

transparent is also a valid value.

'color' and 'background-color'

Colours can be applied by using color and background-color (note that this must be the American English 'color' and not 'colour').

A blue background and yellow text could look like this:

h1 {

color: yellow;

background-color: blue;

}

font-family

This is the font itself, such as Times New Roman, Arial, or Verdana.

The font you specify must be on the user's computer, so there is little point in using obscure fonts. There are a select few 'safe' fonts (the most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by commas. Meta tag:

بحث هذه المدونة الإلكترونية

محمد ديزاينر

HTML

تعليقات

إرسال تعليق