Lab1 HTML

HTML
Eng. Nada Bahaa Ibrahim

Introduction
HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!

Why HTML...
It is the foundational technology for the web since 1989.
Load fast.
Robust – even if the styles and scripts fail to load, the content
will be available.
Backward compatible.
Future-proof.
HTML Editors
WYSIWYG Editors vs. Textual HTML
Best HTML Editors
ATOM NOTEPAD + SUBLIME T ADOBE DRE VISUAL STU

+ EXT AMWEAVER DIO CODE
CC
Let's Start
• HTML is Not Case Sensitive.
• All HTML documents must start with a

document type declaration: <!DOCTYPE
html>.
• The HTML document itself begins with
<html> and ends with </html>.
• The visible part of the HTML document is
Basics between <body> and </body>.

• HTML headings are defi ned with the <h1>
to <h6> tags.
• HTML paragraphs are defi ned with the
<p> tag.
• HTML links are defi ned with the <a> tag.
• HTML images are defi ned with the <img>

tag.
HTML Elements
• An HTML element is defi ned by a start tag, some content,

and an end tag:
<tagname>Content goes here...</tagname>
• HTML elements can be nested.
• HTML elements with no content are called empty elements.
<br> (line break tag)
<img> (Image tag)

HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specifi ed in the start tag
• Attributes usually come in name /value pairs.
name="value"
HTML Headings
• HTML headings are titles or subtitles that you want to

display on a webpage.
• Search engines use the headings to index the structure and

content of your web pages.
• Don't use headings to make text BIG or bold.
• The size of each heading is set to a default size to change

its size use style attribute, using the CSS font-size property.
<h1 style="font-size:60px;"> Heading 1</h1>

HTML Paragraphs
• The HTML <p> element defi nes a paragraph.
• A paragraph always starts on a new line, and browsers automatically

add some white space before and after a paragraph.
• The browser will automatically remove any extra spaces and lines
when the page is displayed.
• The <hr> element is an empty tag used to separate content.
• Use <br> if you want a new line without starting a new paragraph.
• The text inside a <pre> element is displayed in a fi xed-width font

and it preserves both spaces and line breaks.
HTML Text Formatting
Designed to display special

types of text:
– <small> - Smaller text
– <b> - Bold text
– <del> - Deleted text
– <strong> - Important
– <ins> - Inserted text
text
– <sup> - superscripted
text
– <i> - Italic text
– <sub> - text
– <em> - Emphasized text subscripted
– <mark> - Marked text

HTML Comments
• You can add comments to your HTML source by using the

following syntax:


HTML Links
• A link does not have to be text. A link can be an image or any

other HTML element!
<a href="url">link text</a>
• The target attribute can have one of the following values:

– _self - Default. Opens the document in the same
window/tab as it was clicked
– _blank - Opens the document in a new window or tab
– _parent - Opens the document in the parent frame
– _top - Opens the document in the full body of the
window
HTML Links
• To use an image as a link, just put the <img> tag inside the <a> tag
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">< /a>
• Create a link that opens the user's email program (to let them
send a new email)
<a href="mailto:someone@example.com"> Send email</a>
• The title attribute specifies a tooltip text when the mouse moves
over the Link.
HTML Head
• The <head> element is a container for metadata (data about data).
• The <head> element is placed between the <html> tag and the
<body> tag
• The <title> element is required, and it defi nes the title of the
document
• The <style> element is used to defi ne style information for a

single document
• The <link> tag is used to link to external style sheets

HTML Head
• The <meta> element is typically used to specify the character set,

page description, keywords, author, and viewport settings.
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-

scale=1.0">
• The <script> element is used to defi ne client-side Java Scripts
• The <base> element specifi es the base URL and /or target for all
relative URLs in a page
<base href="https://www.w3schools.com/" target="_blank">
HTML CSS
• Control the layout of multiple web pages all at once.
• CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external
CSS fi le
HTML CSS
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
border: 2px solid powderblue ;
padding: 30px;
margin: 50px;
}
HTML Images
• The HTML <img> tag is used to embed an image in a web page.
<img src="url" alt="alternatetext">
• You can use 2 methods to specify the width and height of an

image:
<img src="img_girl.jpg" alt="Girl in a jacket"
style="width:500px;height:600px;">
<img src="img_girl.jpg" alt="Girl in a jacket"
width="500" height="600">
HTML Images
• Use the CSS fl oat property to let the image fl oat to the right or to
the left of a text:
<img src="smiley.gif" alt="Smiley

face" style="float:right;width:42px;height:42px;">
HTML Tables
• Use the HTML <table> element to defi ne a table
• Use the HTML <tr> element to defi ne a table row
• Use the HTML <td> element to defi ne a table data
• Use the HTML <th> element to defi ne a table heading
• Use the HTML <caption> element to defi ne a table caption
• Use the CSS border property to defi ne a border
• Use the CSS border-collapse property to collapse cell borders

HTML Tables
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between

cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows

HTML Tables
• Use the id attribute to • #t01 tr:nth-child(even) {

uniquely defi ne one table background-color: #eee;
<table id="t01"> }
<tr> #t01 tr:nth-child(odd) {
<th>Firstname</th> background-color: #fff;
<th>Lastname</th> }
<th>Age</th> #t01 th {
</tr> color: white;

background-color: black;
</table>
}
HTML Unordered Lists
• Use the HTML <ul> element to defi ne an unordered list
• Use the CSS list-style-type property to defi ne the list item marker
• Use the HTML <li> element to defi ne a list item
• Lists can be nested
• List items can contain other HTML elements

HTML Ordered Lists
• Use the HTML <ol> element to defi ne an ordered list
• Use the HTML <li> element to defi ne a list item
• Use the HTML type attribute to defi ne the numbering type
• you can use the start attribute to start counting from a specifi ed
number
• Lists can be nested
• List items can contain other HTML elements

HTML Description Lists
• Use the HTML <dl> element to defi ne description list
• Use the HTML <dt> element to defi ne a list term
• Use the HTML <dd> element to defi ne a description to a term

HTML Block and Inline Elements
• There are two display values: block and inline
• A block-level element always starts on a new line and takes up the

full width available
• An inline element does not start on a new line and it only takes up
as much width as necessary
• The <div> element is a block-level and is often used as a container

for other HTML elements
• The <span> element is an inline container used to mark up a part

of a text, or a part of a document
HTML Forms
• An HTML form is used to collect user input to a server for

processing.
• The HTML <form> element is used to create an HTML form for user
input.
• Forms are formed of labels and input elements:
<label for="The id for input">First name:</label>
<input type="Type of the input element"
id=“the id of input element" name=“Name of input element">

HTML Forms
• The attributes of the HTML <form> element is:
• <form action="/action_page.php" target=“_blank"

method="get" autocomplete="on" novalidate>
• Elements of the form:
• <input> • <legend>
• <label> • <datalist>
• <select> • <output>
• <option> • <optgroup>
• <button> • <textarea>
• <fieldset>
HTML Iframes
• An inline frame <iframe> is used to embed another document within

the current HTML document.
<iframe src="url" name="iframe_a" title="description“
height="200" width="300" style="border:none;" >
</iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">
W3Schools.com</a></p>
• https://www.w3schools.com /ht
ml /default.asp
References
• https://websitesetup.org /html-t
utorial-beginners /
• https://www.hostinger.com /tuto
rials /best-html-editors

Lab1 HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab1 HTML

Uploaded by

Copyright:

Available Formats

HTML

Eng. Nada Bahaa Ibrahim

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

It is the foundational technology for the web since 1989.

ATOM NOTEPAD + SUBLIME T ADOBE DRE VISUAL STU

• All HTML documents must start with a

Basics between <body> and </body>.

• HTML images are defi ned with the <img>

• An HTML element is defi ned by a start tag, some content,

<tagname>Content goes here...</tagname>

• HTML elements can be nested.

• HTML elements with no content are called empty elements.

<br> (line break tag)

<img> (Image tag)

• All HTML elements can have attributes

• Attributes provide additional information about elements

• Attributes are always specifi ed in the start tag

• Attributes usually come in name /value pairs.

• HTML headings are titles or subtitles that you want to

• Search engines use the headings to index the structure and

• Don't use headings to make text BIG or bold.

• The size of each heading is set to a default size to change

<h1 style="font-size:60px;"> Heading 1</h1>

• The HTML <p> element defi nes a paragraph.

• A paragraph always starts on a new line, and browsers automatically

• The <hr> element is an empty tag used to separate content.

• The text inside a <pre> element is displayed in a fi xed-width font

Designed to display special

– <mark> - Marked text

• You can add comments to your HTML source by using the

• A link does not have to be text. A link can be an image or any

<a href="url">link text</a>

• The target attribute can have one of the following values:

<a href="mailto:someone@example.com"> Send email</a>

• The <head> element is a container for metadata (data about data).

• The <style> element is used to defi ne style information for a

• The <link> tag is used to link to external style sheets

• The <meta> element is typically used to specify the character set,

<meta http-equiv="refresh" content="30">

<meta name="viewport" content="width=device-width, initial-

• The <script> element is used to defi ne client-side Java Scripts

• Control the layout of multiple web pages all at once.

• CSS can be added to HTML documents in 3 ways:

border: 2px solid powderblue ;

• The HTML <img> tag is used to embed an image in a web page.

<img src="url" alt="alternatetext">

• You can use 2 methods to specify the width and height of an

<img src="img_girl.jpg" alt="Girl in a jacket"

<img src="img_girl.jpg" alt="Girl in a jacket"

<img src="smiley.gif" alt="Smiley

• Use the HTML <table> element to defi ne a table

• Use the HTML <tr> element to defi ne a table row

• Use the HTML <td> element to defi ne a table data

• Use the HTML <th> element to defi ne a table heading

• Use the HTML <caption> element to defi ne a table caption

• Use the CSS border property to defi ne a border

• Use the CSS border-collapse property to collapse cell borders

• Use the CSS padding property to add padding to cells

• Use the CSS text-align property to align cell text

• Use the CSS border-spacing property to set the spacing between