2. Outlines
Introduction to html
HTML Elements
HTML Attributes
Basic document structure
Exercises (Lab Lecture1)
Assignment1
3. Introduction to html
HTML (HyperText Markup Language) is the language used to create web page
documents.
HTML is not a programming language; it is a markup language, which means it is a
system for identifying and describing the various components of a document such as
headings, paragraphs, and lists.
You don’t need programming skills—only patience and common sense—to write
HTML.
The best way to learn HTML is to write out some pages by hand.
4. HTML Elements
Before we start adding tags to our document, let’s look at the anatomy of an HTML
element (its syntax) and firm up some important terminology.
A generic container element:
5. HTML Elements(cont...)
The browser knows that any text within brackets (< >) is hidden and not displayed in the
browser window.
The tags added around content are referred to as the markup.
One last thing…capitalization. In HTML, the capitalization of element names is not
important. So <img>, <Img>, and <IMG> are all the same as far as the browser is
concerned.
6. HTML Attributes
Attributes provide additional information about HTML elements.
HTML elements can have attributes.
- Attributes provide additional information about an element.
- Attributes are always specified in the start tag.
- Attributes come in name/value pairs like: name ="value"
8. Basic document structure (cont..)
1. It is a document type declaration (also called DOCTYPE declaration) that
identifies this document as an HTML5 document.
2. The html element is called the root element because it contains all the elements
in the document, and it may not be contained within any other element.
3. The head element contains descriptive information about the document itself,
such as its title, the style sheet(s) it uses, scripts, and other types of “meta”
information.
9. Basic document structure (cont..)
4. The meta elements within the head element provide information about
the document itself.
5. Also in the head is the mandatory title element. According to the HTML
specification, every document must contain a descriptive title.
6. Finally, the body element contains everything that we want to show up in
the browser window.
10. Adding Hidden Comments
You can leave notes in the source document for yourself and
others by marking them up as comments. Anything you put
between comment tags (<!-- -->) will not display in the browser
and will not have any effect on the rest of the source.
11. Basic Text Markup
Text is normally placed in paragraph elements
Paragraph Elements
- The <p> tag breaks the current line and inserts a blank line - the new line
gets the beginning of the content of the paragraph.
The closing tag is required in XHTML, not in HTML
<body>
<p>
Greetings from your Webmaster!
</p>
</body>
12. Basic Text Markup(cont..)
Line breaks
The effect of the <br /> tag is the same as that of <p>, except
for the blank line (in HTML, it could be just <br>)
- No closing tag!
13. Basic Text Markup(cont..)
Example of paragraphs and line breaks
Typical display of this text:
<body>
On the plains of hesitation <p> bleach
the
bones of countless millions </p>
who, at the dawn of victory sat down
to wait,<br> and waiting, died
</body>
14. Basic Text Markup(cont..)
Headings
Six sizes, 1 - 6, specified with <h1> to <h6>
1, 2, and 3 use font sizes that are larger than the default font
size
4 uses the default size
5 and 6 use smaller font sizes
15. Basic Text Markup(cont..)
<body>
<h1> Aidan’s Airplanes (h1)
</h1>
<h2> The best in used airplanes
(h2)
</h2>
<h3> "We’ve got them by the
hangarful" (h3)
</h3>
<h4> We’re the guys to see for a
good used
airplane (h4)
</h4>
<h5> We offer great prices on
great planes
(h5)
</h5>
<h6> No returns, no guarantees,
no refunds,
all sales are final (h6)
</h6>
</body>
16. Basic Text Markup(cont..)
Blockquotes
Content of <blockquote>
To set a block of text off from the normal flow and appearance of text.
<body>
Welcome<blockquote> to web design </blockquote>
</body>
17. Basic Text Markup(cont..)
Font Styles and Sizes (can be nested)
- Emphasis - <em> (often set in italics)
- Strong - <strong> (often set in boldface)
- Monospace - <code> (often set in Courier)
18. The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier),
and it preserves both spaces and line breaks:
19. HTML Text Formatting Elements
HTML defines special elements for defining text with a special meaning.
Formatting elements were designed to display special types of text:
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small and big text
- Deleted text
- Inserted text
- Subscripts
- Superscripts
20. HTML Text Formatting Elements(cont..)
Bold text
- The HTML <b> element defines bold text
- Or, we can use <strong> element to bold the text
21. HTML Text Formatting Elements(cont..)
HTML Italic and Emphasized Formatting:
- The HTML <i> element defines italic text
- The HTML <em> element defines emphasized text
22. HTML Text Formatting Elements(cont..)
Small and big text
- It is a way to maximize or minimize the text size.
- To minimize the text size use <small> element, and maximize the text size
use <big> element.
23. HTML Text Formatting Elements(cont..)
HTML Marked Formatting
- The HTML <mark> element defines marked or highlighted text:
HTML Deleted Formatting
- The HTML <del> element defines deleted (removed) text
24. HTML Text Formatting Elements(cont..)
HTML Inserted Formatting
- The HTML <ins> element defines inserted (added) text.
25. HTML Text Formatting Elements(cont..)
HTML Subscript Formatting
- The HTML <sub> element defines subscripted text.
- HTML Superscript Formatting
- The HTML <sup> element defines superscripted text.
26. Text direction
Right to Left
<html dir="rtl">
<p dir=“rtl”> your paragraph </p>
Left to Right
<html dir=“ltr">
<p dir=“ltr”> your paragraph </p>
27. HTML Computer Code Elements
HTML Computer Code Formatting
- HTML normally uses variable letter size and spacing.
- This is not wanted when displaying examples of computer code.
- HTML defines the below elements for computer code formatting:
- <kbd> defines keyboard input
- <samp> defines sample output from a computer program.
- <code> defines a piece of programming code.
* Notice:
• The <code> element does not preserve extra whitespace and line-breaks.
• To fix this, you can put the <code> element inside a <pre> element.
30. Font color
To add the font color we should use an attribute called color inside the
opening font tag
This is <font color="red">Red</font>
and This is <font color="blue">Blue</font>
This is Red and This is Blue
31. Font type
<font face="Verdana">Verdana Text</font><br>
<font face="Courier New">Courier New Text</font>
<font face="Courier New, Verdana, Arial, Times New Roman ">write your Text
here…. </font>
• Make sure to write the correct font name
• If the computer doesn’t support the first font type, it will go to the second type and so
on.
32. Font size
- There are 7 font size, the default font size is 3,
<font size="+4">Size 7</font><br>
<font size="+3">Size 6</font><br>
<font size="+2">Size 5</font><br>
<font size="+1">Size 4</font><br>
<font size=“+0">Size 3</font><br>
<font size="-1">Size 2</font><br>
<font size="-2">Size 1</font><br>
33. Font size (cont..)
- Or directly you can choose the font size
<font size="7">Size 7</font><br>
<font size="6">Size 6</font><br>
<font size="5">Size 5</font><br>
<font size="4">Size 4</font><br>
<font size="3">Size 3</font><br>
<font size="2">Size 2</font><br>
<font size="1">Size 1</font>
34. Font size (cont..)
Another way to maximize or minimize the font by on step is using
<small> or <big> (based on the default font size)
- Example:
<big>size 4</big><br>
<small>size 2</small><br>
<big><big>size 5</big></big><br>
35. Horizontal Line <hr>
Use <hr/> to draw horizontal rules separating major sections of text, or wherever you’d
like to see a line across the page.
Width: to specify the line width such as 19, 293 ,… by pixel or by percentage from the
page width such as 20% or 85%
Size: to specify the line height
Color: to specify the line color
This is the First Line
<hr>
This is the Secound Line
<hr color="Purple">
This is the Third Line
<hr width="30%">
38. Q1.Write Html code to see difference between paragraphs & normal text with line break
Q2. Write Html code to create a webpage to print values 1 to 5
Q3. Write Html code to create a webpage to print your city name in red color
Q4. Write Html code to print a paragraph with different font and color
Lecture (1) Exercises
39. Answer(Q1):
Lecture (1) solutions
<!DOCTYPE html>
<head>
<title> Different between HTML Paragraph & Regular line break </title>
</head>
<body>
This is regular text. <br/>
This is another line after line break.
<p>This is a first paragraph. You can add any kind of text here. </p>
<p>This is a second paragraph. This is some sample text. </p>
<p>This is another paragraph. You can add multiple lines of text in this paragraph. </p>
</body>
</html>
40. Answer(Q2):
Lecture (1) solutions
<!DOCTYPE html>
<head>
<title> webpage to print values 1 to 5
</title>
</head>
<body>
1 2 3 4 5
</body>
</html>
Answer(Q3):
<!DOCTYPE html>
<head>
<title> webpage to print your city name in red
color </title>
</head>
<body>
<font color="red">Sana’a</font>
</body>
</html>
41. Answer(Q4):
Lecture (1) solutions
<!DOCTYPE html>
<head>
<title> print a paragraph with different font and color </title>
</head>
<body>
<p>
<font face="Arial" color="red">
Web Design Font(1)
</font>
<font face="Times New Roman" color="green">
Web Design Font(2)
</font>
<font face="Lucida Calligraphy" color="blue">
Web Design Font(3)
</font>
</p>
</body>
</html>
42. Write Html code whose results are the same as this page
- Click this link to download file:
https://drive.google.com/drive/Assignment1
Assignment1