Scribd
Upload
3 views

2- HTML1

The document provides an introduction to HTML, explaining its purpose as the foundational language for creating web pages. It covers HTML structure, tags, attributes, and various elements such as headings, paragraphs, and formatting options. Additionally, it discusses the use of integrated development environments (IDEs) for coding and highlights essential HTML properties and syntax.

Uploaded by

Abdelrahman Tamer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

2- HTML1

The document provides an introduction to HTML, explaining its purpose as the foundational language for creating web pages. It covers HTML structure, tags, attributes, and various elements such as headings, paragraphs, and formatting options. Additionally, it discusses the use of integrated development environments (IDEs) for coding and highlights essential HTML properties and syntax.

Uploaded by

Abdelrahman Tamer
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

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

You might also like