Scribd
Upload
4 views

Lec6 ... HTML

The document provides an overview of Hypertext Markup Language (HTML), detailing its purpose as the standard markup language for creating web pages and its structural elements, including HEAD and BODY sections. It explains the use of HTML tags, attributes, and formatting elements, as well as how to create links and incorporate images. The content serves as an introduction to web technology for the Spring 23-24 semester, focusing on foundational HTML concepts and syntax.

Uploaded by

salma montaser
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Lec6 ... HTML

The document provides an overview of Hypertext Markup Language (HTML), detailing its purpose as the standard markup language for creating web pages and its structural elements, including HEAD and BODY sections. It explains the use of HTML tags, attributes, and formatting elements, as well as how to create links and incorporate images. The content serves as an introduction to web technology for the Spring 23-24 semester, focusing on foundational HTML concepts and syntax.

Uploaded by

salma montaser
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 108

Spring 23-24

Semester 4

Web Technology
Dr. Rodaina Abdelsalam
[email protected]
Introduction to
internet
concepts
Outline
Hypertext Markup Languages (HTML)
Hypertext Markup Languages (HTML)
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the static content of a Web page
An HTML file must have an html file extension
An HTML file can be created using a simple text editor
Hypertext Markup Languages (HTML)
Hypertext refers to the fact that Web pages are more than just text, it can contain multimedia, provide links
that allow the reader to jump to other places within the document or to another document altogether
(cross-referencing).
Hypertext Markup Languages (HTML)
There are many versions of HTML and different browsers have their own add-ons.
The latest version of HTML is known as HTML5.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages
correctly.
It must only appear once at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
Hypertext Markup Languages (HTML)
HTML structural Elements:
An HTML document has two main structural elements
HEAD that contains setup information for the browser and the Web
page
e.g., the title for the browser window, style definitions, JavaScript code,
description of the page, background information, and some other
commands we will discuss later.
BODY contains the actual content to be displayed in the Web page
The visible part of the HTML document is between <body> and </body>.
HEAD section enclosed between <head> and </head>
BODY section enclosed between <body> and </body>
Hypertext Markup Languages (HTML)
HTML uses two things: tags and attributes.
They work together but perform different functions.
HTML tags
Tags are used to mark up the start of an HTML element and they are usually enclosed in angle
brackets < >.
Most HTML tags normally come in pairs; <tag> ... </tag> that you can insert the tag content
between them.
tag pairs define containers, any content within a container has the rules of that container applied
to it.
For example, the text within <b> … </b> would be boldfaced.
HTML tags are NOT case sensitive, <b> means the same as <B>
HTML tags may have many parameters or no parameters at all.
When using multiple tags, the tags must be closed in the order
in which they were opened. For example:
<strong><em>This is really important!</em></strong>
HTML tags
HTML <html>…… </html>:
The first and last tags in a document should always be the HTML tags.
These are tags that tell a Web browser where the HTML in your document begins and ends.
The most absolute basic of all possible Web documents is:
HTML tags
The most absolute basic of all possible Web documents is:
HEAD <head>….. </head>:
The HEAD tags contain Metadata for the page (all of the page's header information). ''header,'‘ doesn't
mean what appears at the top of the browser window, but things like the document title and so on.
TITLE <title>…….</title>:
This container is placed within the HEAD structure, it contains the page title. This will appear at the top of
the browser's title bar, and also appears in the history list. Finally, the contents of the TITLE container go
into your bookmark file, if you create a bookmark to a page.
HTML tags
BODY tags in HTML:
BODY <body>….. </body>:
BODY comes after the HEAD structure. Between the BODY tags, you find all of the content of the
page (stuff that gets displayed in the browser window).
All of the text, the graphics, and links, and so on – these things occur between the BODY tags.

Comment Tags:
We write a comment to make a note in the code, but this comment doesn't appear in the browser like
the following comment.
< !-- Computer Application -- >
You can write the comment in any place in the code.
HTML tags
HTML tags
Headings:
The heading structures are most commonly used to set apart document or section titles.
There are six levels of headings, from Heading 1 to Heading 6.
•<h1>
•<h2>
•<h3>
•<h4>
•<h5>
•<h6>
Heading 1 (H1) is ''most important'' and Heading 6 (H6) is ''least important.''
By default, browsers will display the six heading levels in the same font, with the point size decreasing as the
importance of the heading decreases.
HTML tags
HTML Headings
HTML tags
Paragraph:
The beginning of a paragraph is marked by <P>, and the end by </P>.
A new paragraph starts on a new line, preceded by a blank line. HTML automatically adds an extra blank line
(white space , a margin) before and after a paragraph.
HTML tags
Paragraph:
HTML Display
You cannot be sure how HTML will be
displayed. Large or small screens, and
resized windows will create different results.
With HTML, 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.
HTML tags
Line Break and Horizontal Ruler Tags
If you want to end a line after a certain word, but don't want to start a new
paragraph so, what you need is a line break, which is invoked by using the
<br> tag. This forces a line break wherever you place it in the content.
You can insert a horizontal ruled line that delineates and separates sections
of your document using the <hr>
Example of (HTML)
HTML tags
HTML structural Elements:
Example:
• The <html> element is the root element and it defines
the whole HTML document.
<!DOCTYPE html> • It has a start tag <html> and an end tag </html>.
<html> • Then, inside the <html> element there is
<body> a <body> element. The <body> element defines the
document's body.
<h1>My First Heading</h1> • It has a start tag <body> and an end tag </body>.
<p>My first paragraph.</p>
• Then, inside the <body> element there are two other
</body> elements: <h1> and <p>
• The <h1> element defines a heading.
</html> • It has a start tag <h1> and an end tag </h1>
• The <p> element defines a paragraph.
• It has a start tag <p> and an end tag </p>

My First Heading
My first paragraph.
HTML tags
HTML structural Elements:
Every sequence of white space is interpreted as a single space (browsers ignore multiple spaces between
words within paragraphs)
If you try to type two words separated by five spaces, only one space
will be displayed in the browser.
Browser automatically wraps the text to fit the window size.
Extra line spacing can be done inserting NBSP (Non-Breaking Space), which is an invisible character that
takes up one space, by typing &nbsp;
HTML tags &nbsp
HTML tags
Line Breaks
Note that Browsers neglect spaces and newline in the html
source.
The <br/> tag is used when you want to break a line, it
forces a line break wherever you place it.
<body>
<p> This <br /> is a paragraph
with line breaks </p>
</body>
HTML tags
HTML tags
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<sub> - Subscript text
<sup> - Superscript text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
HTML tags
HTML structural Elements:
Example:

<html>
<head>
<title> Title of page </title>
</head>
<body> This is my first homepage.
<b> This text is bold </b>
</body>
</html>
This is my first homepage. This text is bold
HTML Formatting Elements
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.
Example
<b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.
Example
<strong>This text is important!</strong>

N.B. What differentiates the <strong> tag from the tag <b> is
its semantics. The <strong> tag shows web crawlers that the
text is of greater importance
HTML Formatting Elements
HTML <i> and <em> Elements
The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed
in italic.
The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, etc.
Example
<i>This text is italic</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.
<em> conveys semantic meaning, indicating that the emphasized text is important, which can also aid
accessibility tools like screen readers in highlighting key content, and pronouncing the words using verbal
stress.
Example
<em>This text is emphasized</em>
HTML Formatting Elements
HTML <sup> Element
The HTML <sup> element defines superscript text.
Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW[1].

HTML <sub> Element


The HTML <sub> element defines subscript text.
subscript text appears half a character below the normal line.

Example
HTML Formatting Elements
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
HTML Formatting Elements
HTML <small> Element
The HTML <small> element defines smaller text:
HTML Formatting Elements
HTML <del> Element
The HTML <del> element defines text that has been deleted from a document. Browsers will usually
strike a line through deleted text:
<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element


The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually
underline inserted text:
<p>My favorite color is <ins>red</ins>.</p>

N.B. These tags are commonly used together to show content changes.
e.g. <p>
Web Technology is a level <del>one</del>
<ins>two</ins> course
</p>
HTML Formatting Elements
Text Appearance
We can specify more styles for fonts by using the following tags:
< tt >… < /tt > to specify typewriter-like (fixed-width)font
HTML Formatting Elements
Text Appearance
Special Characters
&amp; to specify &
&lt; to specify <
&gt; to specify >
&quot; to specify "
&copy; to specify ©
HTML Formatting Elements

What’s wrong here????


Text Size
The following table displays tags used for controlling fonts sizes and its meaning:
Hypertext Markup Languages (HTML)
Preformatted Text
The <pre> …… </pre> tag identifies preformatted text.
The pre tag in HTML defines a block of preformatted text, preserving spaces, line breaks, and tabs. It
displays text in a fixed-width font, which can be styled using CSS.
This tag is useful for displaying code, formatted text, and preserving text layout.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the opening tag
Attributes usually come in name/value pairs like: name="value“

An example of an attribute is:


<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.
Outline
1. HTML Page
2. LINKS
3. Frames and List
4. TABLES
5. Advanced HTML
6. DHTML
Hypertext Markup Languages (HTML)
HTML Links
The <a> tag defines a hyperlink, which is used to link from one page to another.
The <a> href attribute is used to specify the URL of the page that the link points to.
When the href attribute is not present in the <a> element, it will not function as a hyperlink. This attribute is
essential for creating links to any address and is used in conjunction with the <a> tag.
<a> must have a closing tag </a>

Syntax
<a href="URL"> Link text </a>
Links
HTML Links
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Links
Attribute Values
Absolute URL: It points to another website.
Relative URL: It points to a file within a website.
Anchor URL: It points to an anchor within a page.
LINKS
Relative URL Versus Absolute URL:
You can link to documents in other directories by specifying the relative path from the current document to the
linked document.
For example, a link to a file MyfirstwebPage.html located in the subdirectory Pages would be this line of code :
<a href=''pages/My first webPage.html''>WebPage</a>
You can also use the complete URL. For example, to include a link to this primer in your document, enter this line of
code:
< a href =''http://www.eelu.edu.eg>Egyptian ELearning University</a>
LINKS
Relative URL Versus Absolute URL:
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do not get permission to use it, you may be in
violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed
or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the
domain name.
Example: src="img_girl.jpg".
If the URL begins with a slash, it will be relative to the domain.
Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change domain.
LINKS
Links to Specific Sections:
Anchors can also be used to move a reader to a particular section in a
document (either the same or a different document) rather than to the
top, which is the default.
This type of an anchor is commonly called a named anchor because it
creates the links, you insert HTML names within the document.
HTML Attributes
Example of href attribute in <a> element
The src and alt Attributes
The IMG link tag
Images are placed in Web documents using the <img> tag . This tag has no closing tag like <a>.
Images are not technically inserted into a web page; images are linked to web pages. So in order to make the
<img> tag work, you need to use an src attribute.
src stands for "the source of this graph." The value of src is the path (URL) to the image that you want to have
displayed on your Web page.

Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and
inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the
web page, otherwise your visitors will get a broken link icon.
The src and alt Attributes
Thus, a typical image tag will take the form:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The <img> tag is used to embed an image in an HTML page.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason
cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might
flicker while the image loads.
The src and alt Attributes
Images can be placed almost anywhere within the body of the document. They can be between paragraphs,
within paragraphs, in list items or definition-list definitions, and even within headings.

How to insert images from another folder or from another web site:
<img src="/images/
stickman.gif" alt="Stickman" width="24" height="39">
To Add Video in HTML
<video> tag is used to add a video in HTML, it allows embedding videos directly into webpage without the need
for external players.
•The <video> tag supports multiple formats like MP4, WebM, and Ogg.
•We can include attributes such as controls, autoplay, and loop to enhance user experience.
•The <source> tag is used within <video> to specify the video file’s path and type for browser compatibility.
format (type=”video/mp4″ ensures compatibility with most browsers)
LINKS
Suppose you want to set a link from document A (documentA.html) to a specific section in another document
(MainDocument.html).
Enter the HTML coding for a link to a named anchor:
documentA.html:
<a href=''MainDocument.html#ANP''>Acadia National Park</a>.
Next, create the named anchor (in this example ''ANP'') in MainDocument.html:
<H2><A NAME=''ANP''>Acadia National Park</a></H2>

Instead of writing the name of another web page file you can go to a specific title in the same document
web page, for example ''Useful Tips
Section'' by:
Putting a named anchor inside an HTML document, then,
Creating a link to the ''Useful Tips Section'' inside the same document.
LINKS
The MAILTO link:
Mailto links are used to redirect to an email address instead of a web page URL.
When a user clicks on the Mailto link, the default email client on the visitor's computer opens and suggests
sending a message to the email address mentioned in the Mailto link.
To create a Mailto link, you need to use the HTML <a> tag with its href attribute, and insert a "mailto:" parameter
after it, like the following:

For example, enter:


<a href=“mailto:[email protected]”>Web Engineering 1 mail</a>
LINKS
The MAILTO link:
If you want to send the email to more than one address, separate your email addresses with a comma:
LINKS
The MAILTO link:
The following fields can be filled out beforehand:
subject - for the subject line,
cc - for sending a carbon copy,
bcc - for sending a blind carbon copy,
body - for the message's body text.
LINKS
The MAILTO link:
If you want to have a subject field, which is already filled out, add the “subject”
parameter to the href attribute:
<a href="mailto:[email protected]?subject=Mail from our Website">Send
Email</a>
To add CC and BCC to your email, use the "cc" or "bcc" parameter on
the href attribute:
<a href="mailto:[email protected][email protected],
[email protected], &[email protected] &subject=Mail from
our Website">Send Email</a>
To add a body text, use the "body" parameter with other parameters:
<a href="mailto:[email protected][email protected],
[email protected], &[email protected] &subject=Mail from
our Website &body=Some body text here">Send Email</a>
Outline
1. HTML Page
2. LINKS
3. Frames and List
4. TABLES
5. Advanced HTML
6. DHTML
Frames: iframe
In HTML5 the <iframe> tag is used to embed another document within the current HTML document:
<iframe src="https://www.w3schools.com"></iframe>
The HTML <iframe> tag specifies an inline frame.
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web
Tutorials"></iframe>
The <iframe> tag comes in pairs. The content is written between the opening (<iframe>) and closing (</iframe>)
tags.
It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read
out what the content of the <iframe> is.
Frames: iframe
Example
Frames: iframe
Some of iframe attributes:
To set the size of iframe, use the height and width attributes, or use CSS. The attribute values are set in pixels by
default, but they can also be in percent.
Height; its value is pixels, it specifies the height of an <iframe>. Default height is 150 pixels
Width; its value is pixels, it specifies the width of an <iframe>. Default width is 300 pixels.
Example of height and width attributes in percentage:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300"></iframe>
</body>
</html>
Frames: iframe
Some of iframe attributes:
name; its value is text, it specifies the name of an <iframe>
src; its value is URLS, it specifies the address of the document to embed in the <iframe>

By default, an iframe is surrounded by a border. To remove the border, you can use CSS border property.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<iframe src="https://www.w3docs.com" width="80%" height="300"
style="border: none"></iframe>
</body>
</html>
Frames: iframe
Adding Video Using Iframe Tag

Embedding a video via an <iframe> allows seamless integration from


external sources like YouTube.
• Specify the video’s URL within the <iframe> tag to embed the
content.
• Define the width and height attributes to control the display
dimensions.
HTML Unordered Lists
An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
The list items are marked with bullets (typically small black
circles)

Example 1:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML Unordered Lists
Unordered lists have extension that produce differently
shaped bullets.
Web browsers support three types of bullets—a solid disc, a
circle, and a square
You can choose which bullet to use for your unordered list by
specifying a type attribute.
For example, you can change the bullet shape for that specific
list item by specifying type=”shape”.
For example, <ul type=”square”> means that list items is bulleted
with a square.
HTML Unordered Lists
Example 2
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag
The list items are marked with numbers.

Example 1:
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

This HTML code looks in a browser as:


1. Coffee
2. Milk
HTML Ordered Lists
Example: 2
<html>
<body> This HTML code looks in a browser as:
<h4>Numbered list:</h4>
<ol> Numbered list:
<li>Apples</li> 1. Apples
<li>Bananas</li> 2. Bananas
<li>Lemons</li> 3. Lemons
<li>Oranges</li> 4. Oranges
</ol> Letters list:
<h4>Letters list:</h4> A. Apples
<ol type="A"> B. Bananas
<li>Apples</li> C. Lemons
<li>Bananas</li> D. Oranges
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
HTML Definition Lists:
A definition list is a list of items, with a description of each
item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with:
<dt> (defines the item in the list)
<dd> (describes the item in the list).
HTML Definition Lists:
Example

<html>
<body>
<h4>A Definition List:</h4> This HTML code looks in a browser as:
<dl>
<dt>Coffee</dt> A Definition List:
<dd>Black hot drink</dd> Coffee
Black hot drink
<dt>Milk</dt> Milk
<dd>White cold drink</dd> White cold drink
</dl>
</body>
</html>
Nested list:
Example:
<Html>
<body>
<h4>A nested List :</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Outline
1. HTML Page
2. LINKS
3. Frames and List
4. TABLES
5. Advanced HTML
6. DHTML
Tables
HTML tables allow web developers to arrange data into rows and columns.
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag.
In each raw of the table, you can create the (Table header) tags. Each table header is defined with a <th> tag.
In each raw of the table, you can create the (Table Data) tags. Each table data/cell is defined with a <td> tag.
Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
Tables
A simple HTML table

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.


Tables
To make a cell span more than one column, use the colspan attribute:
In this example colspan=“2” means will accept data in two columns

55577720
55588830
Tables
To make a cell span more than one row, use the rowspan attribute:
In this example rowspan=“2” means will accept data in two rows

55577720

55588830
Tables
To add a caption to a table, use the <caption> tag.
Note: The <caption> tag must be inserted immediately after the <table> tag.
Tables
Tables for No tabular Information:
Some HTML authors use tables to present no tabular information.
For example, because links can be included in table cells, some authors use a table with no borders to create
''one'' image from separate images.
However using table borders with images can create an impressive display as well.
Tables
Tables Formatting
The following parameters (attributes) are used for tables formatting:
Tables
Add a Border
To add a border to a table, use the CSS border property:
Example
table, th, td {
border: 1px solid black;
}

Collapsed Borders
To let the borders collapse into one border, add the CSS border-collapse property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Tables
Add Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
th, td {
padding: 15px;
}
Tables
Tables Formatting
You can change the table background color or the table border color using the parameters, bgcolor and
bordercolor:
Tables
Nested tables:
The nested tables or ‘tables within
table’ is a concept used while
creating bigger and complex tables.
A table can be created within
another table by simply using the
table tags like <table>, <tr>, <td>,
etc., to create our nested table.
HTML <div> Tag
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is
then styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and
after the <div> element.
Color Values
HTML colors are specified with:
Predefined color names
RGB values
HEX values
HSL values
RGBA values
HSLA values
Color Values
Color Names
In HTML, a color can be specified by using a color name:
HTML supports 140 standard color names.
Color Values
Color Names
Background Color
You can set the background color for HTML elements:
Color Values
Color Names
Text Color
You can set the color of text:
Color Values
Color Names
Border Color
You can set the color of borders:
Color Values
HTML colors defined using a hexadecimal notation (HEX) for the combination of
Red, Green, and Blue color values (RGB), the lowest value that can be given to one
of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF). HEX
values are specified as 3 pairs of two-digit numbers, starting with a # sign

16 Million Different Colors


The combination of Red, Green, and Blue values from 0 to 255, gives more than 16
million different colors (256 x 256 x 256).
Color Values
Outline
1. HTML Page
2. LINKS
3. Frames and List
4. TABLES
5. Advanced HTML
6. DHTML
Advanced HTML
HTML Layouts
Web page layout is very important to make your website look good
Design your webpage layout very carefully
Website Layouts
Most websites have put their content in multiple columns (formatted like a
magazine or newspaper).
Multiple columns are created by using <table> or <div> tags.
Some CSS are normally also added to position elements, or to create
backgrounds or colorful look for the pages.
1-HTML Layouts - Using Tables
The simplest way of creating layouts is by using the HTML <table> tag.
Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting
tabular data - NOT as a layout tool!
1-HTML Layouts - Using Tables
Example:
This example uses a table with 3 rows and 2 columns -the first and last row spans both columns using the colspan attribute:
2- HTML Layouts - Using Div Elements
The div element is a block level element used for grouping HTML elements.
Example:
Using five div elements to create a multiple column layout, creating the same result as in the previous example
Metadata
Metadata is information about data.
The <meta> tag provides metadata about the HTML document. Metadata will not
be displayed on the page, but will be machine parsing.
Meta elements are typically used to specify page description, keywords, author of
the document, last modified, and other metadata.
The <meta> tag always goes inside the head element.
The metadata can be used by browsers (how to display content or reload page),
search engines (keywords), or other web services.
Keywords for Search Engines
Some search engines will use the name and content attributes of the meta element
to index your pages.
The following meta element defines a description of a page:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
The following meta element defines keywords for a page:
<meta name="keywords" content="HTML, CSS, XML" />
The intention of the name and content attributes is to describe the content of a
page
The HTML script Element
The <script> tag is used to define a client-side script, such as a JavaScript.
The script element either contains scripting statements or it points to an external
script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic
changes of content.
The HTML script Element
Example :
The script writes Hello World! to the HTML output:
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html>
The result is:
Hello World!
Note: If the "src" attribute is present, the <script> element must be empty.
The HTML script Element
Example :
The HTML Noscript Element
The <noscript> tag defines an alternate content to be displayed to users that have
disabled scripts in their browser or have a browser that doesn't support client-side
scripting.
The <noscript> element can be used in both <head> and <body>. When used inside
<head>, the <noscript> element could only contain <link>, <style>, and <meta>
elements.
The noscript element can contain all the elements that you can find inside the body
element of a normal HTML page.
The HTML Noscript Element
Example :

A browser without support for JavaScript will show the text in the noscript element
Outline
1. HTML Page
2. LINKS
3. TABLES
4. Frames and List
5. Advanced HTML
6. DHTML
DHTML
DHTML stands for Dynamic Hypertext Markup Language.
DHTML is NOT a language or a web standard.
It is NOT a markup language
It is NOT a scripting language like JavaScript.
DHTML is not one particular, technology or set of features. It includes several technologies and describes
how these technologies interact.
Web pages built with DHTML are richer and more interactive, react faster, and don’t use much bandwidth.
DHTML
DHTML refers to the use of three languages together in Web design: HTML, CSS, and JavaScript.
HTML is used for the basic structure of the document
Cascading Style Sheets (CSS) to define the presentation and style of the document.
JavaScript to manipulate the Document Object Model (DOM)
As a result, the new tags supported in HTML trigger additional JavaScript events enabling more control
over the content being rendered.
DHTML
HTML
HTML 4 standards have rich support for dynamic content:
HTML supports JavaScript
HTML supports the Document Object Model (DOM)
HTML supports HTML Events
HTML supports Cascading Style Sheets (CSS)
DHTML is about using these features, to create dynamic and interactive web pages.
DOM
The HTML DOM describes the Document Object Model for HTML.
The HTML DOM defines a standard way for accessing and manipulating HTML documents.
DHTML is about using the DOM to access and manipulate HTML elements
DHTML
CSS
CSS defines how to display HTML elements.
DHTML is about using JavaScript and the HTML DOM to
change the style and positioning of HTML elements.

JavaScript
JavaScript is the most popular scripting language on the internet,
and it works in all major browsers.
DHTML is about using JavaScript to control, access and
manipulate HTML elements
DHTML
Advantages of DHTML:
1. DHTML makes documents dynamic; that:
Allow the designer to control how the HTML displays Web pages’ content.
React and change with the actions of the visitor.
Can exactly position any element in the window, and change that position after the
document has loaded.
Can hide and show content as needed.
2. DHTML allows any HTML element (any object on the screen that can be controlled independently using
JavaScript) in Internet Explorer to be manipulated at any time, turning plain HTML into dynamic HTML.
3. With DHTML, changes occur entirely on the client-side (on the user's browser)
4. Using DHTML gives the author more control over how the page is formatted and how content is
positioned on the page.

You might also like