Computer Department Egyptian Language School First Term- 2017/2018 1 2 nd Prep. – Computer & Information Technology Unit Four (Hyper Text Markup Language) HTML Lesson One Create Web Pages by Using HTML After finishing this lesson the student will be able to: Identify the following basic rules to create a web page By HTML. Identify the structure to create a web page by HTML. Add “Text” to the web page and format it. We knew that one of the main stages to create a website is the execution stage, when the paper design becomes a web page in which all data, texts, images, videos, sound files are input. In this lesson, we will know in details how to use HTML to create a web. HTML (Hyper Text Markup Language) -It is a coding language used to create internet pages which are used through an internet browser (e.g. : Internet explorer- google chrome, Opera,… ) HTML codes: To create a web page, HTML codes are used, these codes are called Tags. An internet browser executes these tags on the browser page. To create a web page using HTML tags, do as follows: - Create a text file using a text editor to write and edit the HTML tags (ex: Notepad) - Write the HTML tags between these signs “< … >”. - Write most of the tags with a start " < >" and an end “</… >". - Save the text file with the HTML tags with.htm or .html extension - Open the saved file using a web browser and notice the result. - Write HTML tags in capital or small letters.
Transcript
Computer Department Egyptian Language School First Term- 2017/2018
1 2nd Prep. – Computer & Information Technology
Unit Four
(Hyper Text Markup Language)
HTML
Lesson One
Create Web Pages by Using HTML
After finishing this lesson the student will be able to:
Identify the following basic rules to create a web page By HTML.
Identify the structure to create a web page by HTML.
Add “Text” to the web page and format it.
We knew that one of the main stages to create a website is the execution stage,
when the paper design becomes a web page in which all data, texts, images,
videos, sound files are input. In this lesson, we will know in details how to use
HTML to create a web.
HTML (Hyper Text Markup Language)
-It is a coding language used to create internet pages which are used through an
internet browser (e.g. : Internet explorer- google chrome, Opera,… )
HTML codes:
To create a web page, HTML codes are used, these codes are called Tags. An
internet browser executes these tags on the browser page.
To create a web page using HTML tags, do as follows:
- Create a text file using a text editor to write and edit the HTML tags (ex: Notepad)
- Write the HTML tags between these signs “< … >”.
- Write most of the tags with a start " < >" and an end “</… >".
- Save the text file with the HTML tags with.htm or .html extension
- Open the saved file using a web browser and notice the result.
- Write HTML tags in capital or small letters.
Computer Department Egyptian Language School First Term- 2017/2018
2 2nd Prep. – Computer & Information Technology
The Structure of creating a web page using HTML:
The HTML tag is divided into two parts:
1- Head: the part where the page
information is written for the browser
like page title.
2- Body: the part where the content is
written.
Add a web page title using </title>.......<title> tag:
-Start a text editor program.
-Type the structure to create the page using HTML tags.
-Type the tag <title> the page title </title> in the field <head >...</head
-Save the file with the name: Visit Egypt.htm
- Open the file the web page using a web browser.
Adding a “Text” to a web page:
- Type the HTML main tags for the previous.
- Type the phrase "An Eye on Egypt" inside the <body>…</body> tag.
- Save the text file with .htm extension
- Display the file using the internet browser.
Changing the direction of the web page using "dir" property:
The default direction of a web page is from left to right (English), to change its
direction to be from right to left use the “dir” property:
Computer Department Egyptian Language School First Term- 2017/2018
3 2nd Prep. – Computer & Information Technology
Web page formatting:
Applying formats to the content of the web page makes it more attractive. Some
of them are applied on the text of the web page and some of them are applied on
the background of the web page:
-Formatting the text includes:
Type the beginning from a new line
Text alignment
Putting spaces between words
Formatting the font (face, volume, cooler, style)
-Formatting the web pages includes:
Changing the cooler of the web page background.
Putting an image as a background web page.
Firstly: formatting the text in the web page:
1-Writing at the beginning of a new line by <br> tag:
-Open the text file, after <body>, write text#1.
- Add the tag <br> and write text#2.
- Save the text file with the .htm extension, then open the file.
-The texts appear on two lines.
2- Centering the text by <center>… </center> tag:
-Open the text file, after <body> write <center> Text </center>
- Save the text file with the .htm extension, then open the file.
-The text appears in the center of the webpage.
3- Add blank space between words by  
-Open the text file, after <body> write: Text#3  ,   text#4
- Save the text file with the .htm extension, then open the file.
-The two texts appear with 4 spaces between them.
Computer Department Egyptian Language School First Term- 2017/2018
4 2nd Prep. – Computer & Information Technology
4-Formatting the font in the web page (face, size, color):
The font is formatted by the <font> tag which has a
group of properties to determine font Name (face),
font size (size) and font color (color)
## Format the font in the webpage by <font>…</font>:
-In HTML the font property "size" values are from 1 to 7.
-Open the text file, after <body> write these tags:
<font face=”Arial” size=”20” color=”red”> Type your text </font>
- Save the text file with the .htm extension, then open the file. (Note: Any text written out of the <font> and </font) tag displays with the default face, color & size.)
## Formatting the font effects in the webpage by (underlined/ bold/ italic):
-Open the text file, after <body> write these tags:
<u> <b> <i> Type your text </u> </b> </i>
- Save the text file with the .htm extension, then open the file.
Secondly: Formatting the background of the web page.
1-Changing webpage background color the property bgcolor
The property bgcolor is related to the <body> tag.
-Open the text file, Write the code <body bgcolor="green"> (Note: bgcolor property is written inside the <body> tag.)
- Save the text file with the .htm extension, then open the file.
2- Adding image as a web page background by the property Background
Use the property Background that is relates to the <body> tag.
- Prepare an image file to be put as a webpage background.
- Save image inside the same folder where the web page is saved in.
- Write the needed code <body background="image1.jpg" > (Note: “image1” is the image name & “.jpg” is its extension. What are the images extensions???)
- Save the text file with the .htm extension, then open the file.
Computer Department Egyptian Language School First Term- 2017/2018
5 2nd Prep. – Computer & Information Technology
Lesson Two
Create Web Pages by Using HTML
After finishing this lesson the student will be able to:
Add contents to the webpage (image, video, hyperlink, etc.)
Format the content of the webpage.
Insert a hyperlink in the webpage / linking the site pages.
1- Insert image inside the webpage by <img> tag.
- Prepare an image file to be put in the webpage.
- Save image inside the same folder where the web page is saved in. (Note: If the image in another folder, we must write the complete path of the image file)
-Open the text file, after <body> write these tags:
<img src=”Photo.png”> (Note: “Photo” is the image name & “.png” is its extension. Don’t close the <img src> tag)
- Save the text file with the .htm extension, then open the file.
2-Controlling the image dimension in the webpage:
Control the image dimensions using the properties of the <img> tag as follows:
- Height= "200" - Width= "300" (Note: We use the measurement unit "pixel" to measure the image dimensions.)
-Open the text file, after <body> write these tags:
<img src=”Picture.bmp” height=”450” width=”300”>
- Save the text file with the .htm extension, then open the file.
3- Align the image inside the webpage:
-Open the text file, after <body> write
<img src=”Img.tif” align=”right”>
- Save the text file, then open the file.
4- Insert the sound as a background sound by <bgsound>tag
We can insert the sound as a background to the webpage to listen to when we
download the webpage by the browser. (Note: "Internet Explorer" is the only browser that supports the <bgsound> tag)
Computer Department Egyptian Language School First Term- 2017/2018
6 2nd Prep. – Computer & Information Technology
- Prepare an audio file to be put in the webpage.
- Save audio inside the same folder where the webpage is saved in. (Note: If the audio in another folder, we must write the complete path of the audio file)
-Open the text file, after <body> write these tags:
<bgsound src=”Sound1.mp3”> (Note: “Sound1” is the audio name & “.mp3” is its extension. What are the audio files extensions???)
- Save the text file then open the file.
5-Insert Video in the web page by <embed> tag
We can insert the video inside the webpage. We must notice that the tag
supports the video file of the type (.swf - .avi - .mov).
- Prepare a video file to be put in the webpage.
- Save video inside the same folder where the webpage is saved in. (Note: If the video in another folder, we must write the complete path of the video file)
-Open the text file, after <body> write these tags:
<embed src=”video1.avi”> (Note: “video1” is the video name & “.avi” is its extension. What are the videos extensions???)
- Save the text file then open the file.
6-Insert hyperlink in the web page by the <a>…</a>tag
Hyperlink is an image or a text, when we click it, we move to another place, it can
be in the same page or in another one, in the
same site or in another one.
To insert a hyperlink, we use href property to
the <a> that, as follows:
<a href= "the needed title, we want to move to" > the text or image </a>
7- Insert a hyperlink to an image:
To make a hyper image, we must follow:
- Display the image by <img> tag.
- Put <img> inside <a>…</a> to make it a hyperlink
Computer Department Egyptian Language School First Term- 2017/2018
7 2nd Prep. – Computer & Information Technology
Tag Function Associated
Properties
<html>
</html>
Written at the beginning and end of the code to
refer that the document is written by html.
<head>
</head>
A place where we write the web page title to the
browser
<body>
…
</body>
A place where we write the content that will
appear inside the web page
Dir – bgcolor
-
background
<title> Choose a title to the web page
<br> Finishing the current line and start a new line
<center> To add a text in the middle of the line
  To insert a space between words in the browser
<font>
</font>
To control the font format Face-color-
size
<u> Underline
<b> bold
<i> Italic
<img> To display the image in the web page src-height-
width-align
<bgsound> To insert sound as a background to the web page src
<embed> To add a sound or video to the web page Src
<a> To create a hyperlink href
Computer Department Egyptian Language School First Term- 2017/2018
8 2nd Prep. – Computer & Information Technology
HTML
Practical Classwork #5
Website designing by HTML The site designing will be:
Home page designing
What are home page contents?
(Logo-banner-page title-links to other pages-texts-video-Audio)
1- Saving
Open Note padfile save as home.html
(note: it will be saved in the same folder (home) with all images, videos & audios of home page)
……………………………………………………………………………………………………………………………………………………………………………………………………………… 2-Making the webpage name/title is “My First Webpage” using HTML. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 3-Adding the text “Book is your best friend” to a web page. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 4-Changing the direction of the web page to be Arabic webpage. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 5-Writing these “ELS school”, “Second prep.”, “Computer Dept.” on three lines. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 6- Centering the texts in no.5. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 7-Adding blank space between these words: Group1, Group2, Group3, Group4, Group5 ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 8-Witing texts in no.5 with the following format:” Batang, 25 and with color=purple. ……………………………………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………………………………………
9-Writing the text in no.3 to be: underlined, bold and italic. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 10-Making the webpage color “Yellow” ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 11-Adding the image “photo.jpg” as the webpage background. ………………………………………………………………………………………………………………………………………………………………………………………………………………
Computer Department Egyptian Language School First Term- 2017/2018
16 2nd Prep. – Computer & Information Technology
12-Inserting the image “pic.png” inside the webpage with height 350 and width 150. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 13-Aligning the image in no.12 to the right. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 14- Inserting the sound “music.mp3” as a webpage background sound. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 15-Inserting the video “movie.mp4” in the webpage. ………………………………………………………………………………………………………………………………………………………………………………………………………………
16-Making the text in no.3 a hyperlink the website “http://www.kutub.info/ ”. ………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………… 17- Making the image in no.12 a hyperlink to the website “http://www.wikihow.com”. ………………………………………………………………………………………………………………………………………………………………………………………………………………
b. Who discovered the microcirculation in humans? c. Who won the Nobel Prize after his death? Imagine#4: If you were a traveler, which place you want to visit and why?
