Web Design
Basics of HTML
2
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.
3
Intro to HTML
- Stands for Hyper Text Markup Language.
- Hypertext is text that contains links to other text.
- Markup refers to tags and elements used within a document
- The first version of HTML was released in 1991, along with the
first web browser and web server.
- 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 files usually have a dot HTML suffix.
- For instance, when you visit a website, the first page that is
returned to the browser is often called index.html.
4
HTML Versions
5
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.
6
HTML Tags
- HTML tags are hidden keywords within a web page, that define
how the web browser must format and display the content.
- 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.
7
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.
8
Question
- You want to insert a paragraph on your website. Choose the
correct format for the opening and closing paragraph tags:
q Opening tag: <p/> Closing tag: </p>
q Opening tag: <p> Closing tag: <p/>
q Opening tag: <p> Closing tag: </p>
q Opening tag: <p> Closing tag: <p>
9
HTML Attributes
- Most HTML elements have properties named “attributes”.
- Attributes are used to define the characteristics of an HTML
element (tag).
- Attributes are always specified in the starting tag.
- Syntax: HTML Tag with single attribute:
<tag attribute="value"> content </tag>
- Syntax: HTML Tag with many attributes
<tag attribute="value" attribute="value"> content
</tag>
10
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>.
11
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>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
12
Remember
- An HTML tag surrounds the whole document.
- This Tag contains two sub-elements, HEAD and BODY.
- This Structure is required to create any HTML document.
- HTML Tags are not Case Sensitive.
- Every web page must contain one and only one <html>, <head>
and <body>.
- HTML Ignores any extra white spaces, Tabs, and line breaks.
13
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>
14
IDE
- As a developer, you'll also use many tools.
- One of the main tools in your toolbox is the integrated
development environment or IDE.
- An integrated development environment or IDE is
software for building applications.
- An IDE is just like a text editor except instead of writing
documents you're writing code.
- There are many IDEs available, some are specific to
one programming language while others support
many languages in one IDE.
15
IDE
- a good text editor like sublime text or VSCode.
- Let's explore some common IDE features.
- Syntax highlighting: To improve readability for
developers, IEDs have syntax highlighting.
- Error highlighting: Just like checking spelling in a text
document, IDEs can highlight mistakes you make in
your programming code
- Autocomplete: IDEs can offer suggestions for
autocompleting words as you start typing them.
16
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">
17
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.
18
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>
19
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">
20
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.
21
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>
22
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">
23
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)
24
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>
25
Horizontal Rule, <hr>
- The <HR> element causes the browser to display a horizontal line
(rule).
- <HR> is an Empty Tag.
26
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>
27
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.
28
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>
29
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>
30
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>
31
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>
32
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>
33
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>
34
