Web Design Lecture2.pptx

HTML 5 (Part1)
Lecture 2
Eng:Hajer qaseem 2023 -2024

Outlines
 Introduction to html
 HTML Elements
 HTML Attributes
 Basic document structure
 Exercises (Lab Lecture1)
 Assignment1

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.

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:

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.

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"

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.

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.

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.

Basic Text Markup
 Text is normally placed in paragraph elements
 Paragraph Elements
- The 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>

Greetings from your Webmaster!

</body>

Basic Text Markup(cont..)
 Line breaks
The effect of the tag is the same as that of , except
for the blank line (in HTML, it could be just )
- No closing tag!

 Example of paragraphs and line breaks
 Typical display of this text:
<body>
On the plains of hesitation bleach
the
bones of countless millions 
who, at the dawn of victory sat down
to wait, and waiting, died
</body>

 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

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

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

 Font Styles and Sizes (can be nested)
- Emphasis - (often set in italics)
- Strong - (often set in boldface)
- Monospace - <code> (often set in Courier)

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:

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

HTML Text Formatting Elements(cont..)
 Bold text
- The HTML element defines bold text
- Or, we can use element to bold the text

 HTML Italic and Emphasized Formatting:
- The HTML element defines italic text
- The HTML element defines emphasized text

 Small and big text
- It is a way to maximize or minimize the text size.
- To minimize the text size use element, and maximize the text size
use <big> element.

 HTML Marked Formatting
- The HTML element defines marked or highlighted text:
 HTML Deleted Formatting
- The HTML <del> element defines deleted (removed) text

 HTML Inserted Formatting
- The HTML <ins> element defines inserted (added) text.

 HTML Subscript Formatting
- The HTML element defines subscripted text.
- HTML Superscript Formatting
- The HTML element defines superscripted text.

Text direction
 Right to Left
<html dir="rtl">
 your paragraph 
 Left to Right
<html dir=“ltr">
 your paragraph

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.

HTML Computer Code Elements(cont..)

Alignment
 Left aligned paragraph
 Centered paragraph
 Right aligned paragraph

Font color
 To add the font color we should use an attribute called color inside the
opening font tag
This is Red
and This is Blue
This is Red and This is Blue

Font type
Verdana Text 
Courier New Text
write your Text
here…. 
• 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.

Font size
- There are 7 font size, the default font size is 3,
Size 7 
Size 3 
Size 2 
Size 1

Font size (cont..)
- Or directly you can choose the font size
Size 7 
Size 1

Font size (cont..)
 Another way to maximize or minimize the font by on step is using
 or <big> (based on the default font size)
- Example:
<big>size 4</big> 
size 2 
<big><big>size 5</big></big>

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

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

 Answer(Q1):
Lecture (1) solutions
<!DOCTYPE html>
<head>
<title> Different between HTML Paragraph & Regular line break </title>
</head>
<body>
This is regular text. 
This is another line after line break.
This is a first paragraph. You can add any kind of text here. 
This is a second paragraph. This is some sample text. 
This is another paragraph. You can add multiple lines of text in this paragraph. 
</body>
</html>

 Answer(Q2):
<!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>
Sana’a
</body>
</html>

 Answer(Q4):
<!DOCTYPE html>
<head>
<title> print a paragraph with different font and color </title>
</head>
<body>


Web Design Font(1)


Web Design Font(2)


Web Design Font(3)


</body>
</html>

 Write Html code whose results are the same as this page
- Click this link to download file:
https://drive.google.com/drive/Assignment1
Assignment1

Web Design Lecture2.pptx

More Related Content

Similar to Web Design Lecture2.pptx

Recently uploaded

Web Design Lecture2.pptx