Scribd
Upload
13 views

Design-G10-Part 1

This document is a comprehensive guide for Grade 10 students on web designing using HTML. It covers the basics of HTML, including its structure, elements, attributes, and how to create and save HTML documents. Additionally, it explains various HTML tags for headings, paragraphs, links, images, and formatting text, along with practical examples and best practices for coding.

Uploaded by

blossemcherry40
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Design-G10-Part 1

This document is a comprehensive guide for Grade 10 students on web designing using HTML. It covers the basics of HTML, including its structure, elements, attributes, and how to create and save HTML documents. Additionally, it explains various HTML tags for headings, paragraphs, links, images, and formatting text, along with practical examples and best practices for coding.

Uploaded by

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

In The Name Of God

Grade 10
Design

Subject: Web Designing

Teacher: Sogand Farsh Foroush

0
In this year we are going to learn web designing using The language for building web
pages and style them. The language is called HTML.

What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

Example:
A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Ok Now lets see what every word that we wrote above means:

• The <!DOCTYPE html> declaration defines that this document is an HTML5


document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page

1
• The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)

• The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>


The HTML element is everything from the start tag to the end tag:

Note: Do not forget to close the tag and use the end tag, otherwise your code
is going to have some issues and it wont work correctly.

Why do we use a browser?

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to
display the document

Learn HTML Using Notepad or TextEdit


Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC)
or TextEdit (Mac).

2
We believe in that using a simple text editor is a good way to learn HTML.

Write Some HTML


Write some codes in the notepad like the picture below:

Picture1-html-sample

Save the HTML Page


Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).

Picture2-savehtml

3
Remember that you can simply change .txt format to .htm by rename your
file.
After you save your file, whenever you open it a web page in a browser will
be opened and you can see what you did in your code.

Picture3-htmlinbrowser

HTML Documents
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>.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.

4
It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading

HTML Paragraphs
HTML paragraphs are defined with the <p> tag

HTML Links
HTML links are defined with the <a> tag

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements


<a href="https://www.w3schools.com">This is a link</a>

HTML Images
HTML images are defined with the <img> tag.

5
The source file (src), alternative text (alt), width, and height are provided as
attributes
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Nested HTML Elements


HTML elements can be nested (this means that elements can contain other
elements).

All HTML documents consist of nested HTML elements.


Look at picture 1 again and you can see that:

• The <html> element is the root element and it defines the whole HTML
document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element

• The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other elements:
<h1> and <p>

• The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>

• The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>

Now go back to picture 1 and see if you can separate every tag from the
other one.

Empty HTML Elements

6
HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag.

Example:
<p>This is a <br> paragraph with a line break.</p>

HTML Attributes
HTML attributes provide additional information about HTML elements.
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"

The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the
link goes to

The src Attribute


The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the
image to be displayed:

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website.


Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to
use it, you may be in violation of copyright laws. In addition, you cannot control
external images; it can suddenly be removed or changed.

7
2. Relative URL - Links to an image that is hosted within the website. Here, the
URL does not include the domain name. If the URL begins without a slash, it will be
relative to the current page. Example: src="img_girl.jpg". If the URL begins with a
slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change
domain.

The width and height Attributes


The <img> tag should also contain the width and height attributes, which specifies
the width and height of the image (in pixels)

The alt Attribute


The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for
some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or
if the user uses a screen reader.

The style Attribute


The style attribute is used to add styles to an element, such as color, font, size,
and more.

The lang Attribute


You should always include the lang attribute inside the <html> tag, to declare the
language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

8
<!DOCTYPE html>
<html lang="en">
<body> ...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So,
the first two characters define the language of the HTML page, and the last two
characters define the country.

The following example specifies English as the language and United States as the
country:

<!DOCTYPE html>
<html lang="en-US">
<body> ...
</body>
</html>

The title Attribute


The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Note: Always Use Lowercase Attributes

Note: Always Quote Attribute Values

Good:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bad:

9
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>

Single or Double Quotes?


Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes: <p title='John "ShotGun" Nelson'>

Or vice versa.

HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

10
Headings Are Important
Search engines use the headings to index the structure and content of your web
pages.

Users often skim a page by its headings. It is important to use headings to show the
document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then
the less important <h3>, and so on.

Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any
heading with the styleattribute, using the CSS font-size property:

<h1 style="font-size:60px;">Heading 1</h1>

HTML Paragraphs

A paragraph always starts on a new line, and is usually a block of text.

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some
white space (a margin) before and after a paragraph.

HTML Display
You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in
your HTML code.

11
The browser will automatically remove any extra spaces and lines when the page is
displayed

picture 4-htmldisplay

HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page, and is most often displayed
as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page

The <hr> tag is an empty tag, which means that it has no end tag.

HTML Line Breaks


The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph

The <br> tag is an empty tag, which means that it has no end tag.

The Poem Problem


This poem will display on a single line:

12
Picture 5-poem

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

Picture 6-pre

HTML Styles
The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.

13
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

Background Color
The CSS background-color property defines the background color for an HTML
element:

Example:

a.

Set the background color for a page to powderblue:


<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

b.

Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>


<p style="background-color:tomato;">This is a paragraph.</p>

</body>

14
Text Color
The CSS color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>

HTML <span> Tag

A <span> element which is used to color a part of a text:

Picture 7-span

Fonts
The CSS font-family property defines the font to be used for an HTML element:

<h1 style="font-family:verdana;">This is a heading</h1>

Text Size
The CSS font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>

15
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML
element:
<h1 style="text-align:center;">Centered Heading</h1>

What is alignment?
It defines which place in the page you want your text/img be:

Picture 8-alignment

HTML Text Formatting


HTML contains several elements for defining text with a special meaning.

HTML Formatting Elements


Formatting elements were designed to display special types of text:

• <b> - Bold text


• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text

16
• <del> - Deleted text
• <ins> - Inserted text

• <sub> - Subscript text


• <sup> - Superscript text

HTML <b> and <strong> Elements


The HTML <b> element defines bold text, without any extra importance

Picture 9-bold

The HTML <strong> element defines text with strong importance. The content inside is typically
displayed in bold.

Picture 10-strong

HTML <i> and <em> Elements

17
The HTML <i> element defines a part of text in an alternate voice or mood. The
content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another
language, a thought, a ship name, etc.

Picture 11-italic

The HTML <em> element defines emphasized text. The content inside is typically
displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using
verbal stress.

Picture 12-emphasize

HTML <small> Element


The HTML <small> element defines smaller text:

18
Picture 13-small

HTML <mark> Element


The HTML <mark> element defines text that should be marked or highlighted:

Picture 14-mark

HTML <del> Element


The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:

Picture 15-delete

HTML <ins> Element


The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:

19
Picture 16-insert

HTML <sub> Element


The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O:

Picture 17-subscript

HTML <sup> Element


The HTML <sup> element defines superscript text. Superscript text appears half a character above the
normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like
WWW[1]:

Picture 18-superscript

20
HTML Quotation and Citation Elements
In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>,
<cite>, and <bdo> HTML elements.

HTML <blockquote> for Quotations


The HTML <blockquote> element defines a section that is quoted from another
source.

Browsers usually indent <blockquote> elements.

Picture 19-blockquote

HTML <q> for Short Quotations


The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Picture 20-shortquotation

21
HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation


systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

Picture 21-abbreviation

HTML <cite> for Work Title


The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

22
Picture 22-cite

HTML <bdo> for Bi-Directional Override


BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Picture 23-bdo

HTML <address> for Contact Information


The HTML <address> tag defines the contact information for the author/owner of a
document or an article.

The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.

23
Picture 24-address

HTML Comments
HTML comments are not displayed in the browser, but they can help
document your HTML source code.

HTML Comment Tag


You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the start tag, but not in the end
tag.

Add Comments
With comments you can place notifications and reminders in your HTML code:

<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->

24
Hide Content
Comments can be used to hide content.

Which can be helpful if you hide content temporarily

<p>This is a paragraph.</p>

<!-- <p>This is another paragraph </p> -->

<p>This is a paragraph too.</p>

You can also hide more than one line, everything between the <!-- and the ->
will be hidden from the display.

<p>This is a paragraph.</p>
<!--
<p>Look at this cool image:</p>
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<p>This is a paragraph too.</p>

Comments are also great for debugging HTML, because you can comment out
HTML lines of code, one at a time, to search for errors.

Hide Inline Content


Comments can be used to hide parts in the middle of the HTML code.

<p>This <!-- great text --> is a paragraph.</p>

25

You might also like