Section 1
Introduction to HTML
TA: Norhan Swidan
Intro to HTML
- The web pages you visit every day are based on three core
technologies, HTML, CSS, and JavaScript.
- Together, they enable you to create web pages and applications
so you can offer any content you have seen online.
Intro to HTML
- Stands for HyperText Markup Language.
- Hypertext is text that contains links to other text.
- Markup refers to tags and elements used within a document
- It is the language for writing web pages.
- HTML is simply a text file with a specific structure that consists of
elements and tags.
HTML Tags and Elements
- HTML Code is composed of:
- Tags (Elements): keywords for writing HTML.
- Attributes: Properties for each Tag.
- Values: Values for each attribute.
HTML Tags
- HTML tags are hidden keywords within a web page.
- Most of the HTML tags come in pairs, the first one is called
starting (opening) tag and the second one is called ending
- (closing) tag.
- The ending tag is written like the starting tag, but with a forward
slash inserted before the tag name.
HTML Tags
- For example, to create a paragraph, you type:
- HTML elements usually have some content inside them.
- For example, between the opening and closing tags of a
paragraph, you add the text of the paragraph you want to write.
jh
HTML Attributes
- All HTML elements can have attributes.
- Attributes provide additional information about elements.
- Attributes are always specified in the starting tag
- Syntax: HTML Tag with single attribute:
<tag attribute="value"> content </tag>
<p style="color:red;">This is a red paragraph.</p>
- Syntax: HTML Tag with many attributes
<tag attribute="value" attribute="value"> content
</tag>
HTML Document Structure
- 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 between <body> and
</body>.
- <head> element contains metadata—information about the webpage.
HTML Document Structure
• The <!DOCTYPE html> declaration defines that this document is an
HTML5 document
• The <html> element is the root element of an HTML page
• The <body> element defines the document's body.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
Main Components of <head>
- Title of the Page (<title>) <title>My Website</title>
- Meta <meta name="viewport" content="width=device-width, initial-scale=1.0">
- Style <style> body { background-color: }</style>
- Link <link rel="stylesheet" href="[Link]">
- Script <script src="[Link]"></script>
Practical Example
- Let’s create our first web page
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Document Properties
- Attributes of the BODY tag control page properties.
1- The bgcolor changes the Page Background Color.
<body bgcolor="#ffffff"></body>
2- The text changes the Page Text Color.
<body text="blue"></body>
3- The dir changes the Body Text Direction. (values: ltr | rtl).
<body dir="ltr">
4- The id gives an id to the BODY.
<body id="b1">
HTML Headings, <hx> </hx>
- HTML defines six levels of headings to render the headings.
- These elements are H1, H2, H3, H4, H5, and H6 with H1 being the
highest (or most important) level and H6 the least.
Practical Example
<!DOCTYPE html>
<html>
<head>
<title>example page</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
HTML Heading Properties
1- The align changes the text alignment. (values: Center | right | left |
justify).
<h1 align ="center">
2- The title adds a Tool Tip for the heading.
<h1 title ="welcome"> text in title </h1>
3- The dir changes the Text Direction. (values: ltr | rtl).
<h1 dir="ltr">
4- The id gives an id to the heading.
<h1 id="head1">
HTML Paragraph, <P> </P>
- The Paragraph Element <P> indicates the start of a new
paragraph, it breaks the texts into sections and places a white
space separators above and below every section.
Practical Example
<!DOCTYPE html>
<html>
<head>
<title>example page</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph 1, ... </p>
<h2>Heading 2</h2>
<p>Paragraph 2, ... </p>
<h3>Heading 3</h3>
<p>Paragraph 3, ... </p>
<h4>Heading 4</h4>
<p>Paragraph 4, ... </p>
</body>
</html>
HTML Paragraphs Properties
1- The align changes the text alignment. (values: Center | right | left |
justify).
<p align ="center"> </p>
2- The title adds a Tool Tip for the heading.
<p title ="welcome"> text in title </p>
3- The dir changes the Text Direction. (values: ltr | rtl).
<p dir="ltr">
4- The id gives an id to the heading.
<p id="head1">
Break, <br>
- Line breaks <br> allows to break the text on a new line, without
starting a new paragraph.
- The <BR> is an Empty Tag. (uses an opening tag only)
Practical Example
<!DOCTYPE html>
<html>
<head>
<title>example page</title>
</head>
<body>
<p>
this is a test for the BR tag <br> this line is
a new line within the
same paragraph
</p></body>
</html>
Horizontal Rule, <hr>
- The <HR> element causes the browser to display a horizontal line
(rule).
- <HR> is an Empty Tag.
Practical Example
<!DOCTYPE html>
<html>
<head>
<title>example page</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph 1, <br>line 2 </p>
<hr>
<p>Line 3 <br>... </p>
</body>
</html>
dh
HTML Hr Properties
1- size: Height in pixels. Default is 2 pixels.
2- width: Width in pixels or percentage. (100%).
3- align: left | right | center.
4- color: sets a color for the rule.
<hr style="height: 2px; width: 100%; background-color: green;
border: none; text-align: right;">
Text Formatting
- <b> or <strong>: changes the text into bold.
<b> this is the text to be bold </b>
<strong> this is the text to be bold </strong>
- <i> or <em>: changes the text into italic.
<i> this is the text to be italic </i>
<em> this is the text to be italic </em>
Text Formatting
- <u>, <ins>: adds an underline to the text.
<u> this is the text to be underlined </u>
<ins> this is the text to be underlined </ins>
- <strike>, <del>: strikes a line through the text.
<strike> strike-through text </strike>
<del> Deleted text </del>
Text Formatting
- <pre>: this tag supports blank spaces and line breaks as the user
types in the code.
<pre> text
here </pre>
- <small>: enforces the browser to use smaller font.
<small> small font </small>
Text Formatting
- <big>: enforces the browser to use a bigger font.
<big> big font </big>
- <blockquote>: creates indents from both sides in the document.
<blockquote> Text </blockquote>
- <center>: enforces the browser to center the text.
<center> centered text </center>
Text Formatting
- <sub>: places text in subscript style position.
<sub> subscript position </sub>
- <sup>: places text in superscript style position.
<sup> Superscript position </sup>
- <mark>: adds a highlight behind the text.
<mark> highlighted text </mark>
Text Formatting
- <Span>: creates a division in the tag data (tag division).
<p>this is a <span>a span in</span> inside a
paragraph</p>
- <div>: creates a division in the document (page division) and can
contain other tags.
<div align="left"><p>….</p></div>