Unit Four (Hyper Text Markup Language) HTML. Lesson One Create Web Pages by Using HTML

Size: px

Start display at page:

Download "Unit Four (Hyper Text Markup Language) HTML. Lesson One Create Web Pages by Using HTML"

Marian Shaw
6 years ago
Views:

1 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. 1 2 nd 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.

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

2 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: 2 2 nd Prep. Computer & Information Technology

3 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 tag: -Open the text file, after <body>, write text#1. - Add the tag and write text#2. -The texts appear on two lines. 2- Centering the text by <center> </center> tag: -Open the text file, after <body> write <center> Text </center> -The text appears in the center of the webpage. 3- Add blank space between words by &nbsp -Open the text file, after <body> write: Text#3 &nbsp, &nbsp text#4 -The two texts appear with 4 spaces between them. 3 2 nd 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

-Open the text file, after <body> write these tags: <font face= Arial size= 20 color= red > Type your text </font> (Note: Any text written out of the <font> and </font) tag displays with the default

4 4-Formatting the font in the web page (face, size, color): The font is formatted by the 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 : -In HTML the font property "size" values are from 1 to 7. -Open the text file, after <body> write these tags: Type your text (Note: Any text written out of the 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: Type your text 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.) 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???) 4 2 nd 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.

5 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) 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 > 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) 5 2 nd 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.

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.

- Prepare a video file to be put in the webpage. - Save video inside the same folder where the webpage is saved in.

6 - 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 6 2 nd Prep. Computer & Information Technology

7 Tag <html> </html> <head> </head> <body> </body> <title> <center> &nbsp Function Written at the beginning and end of the code to refer that the document is written by html. A place where we write the web page title to the browser A place where we write the content that will appear inside the web page Choose a title to the web page Finishing the current line and start a new line To add a text in the middle of the line To insert a space between words in the browser To control the font format Underline bold Italic Associated Properties Dir bgcolor - background Face-colorsize <img> To display the image in the web page src-heightwidth-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 7 2 nd Prep. Computer & Information Technology

home.html (note: it will be saved in the same folder (home) with all images, videos & audios of home page) 2- Start

8 HTML The site designing will be: Practical Classwork #5 Website designing by HTML What are home page contents? Home page designing (Logo-banner-page title-links to other pages-texts-video-audio) 1- Saving Open Note pad file save as home.html (note: it will be saved in the same folder (home) with all images, videos & audios of home page) 2- Start implementing (main tags) 3- Changing background color-add page title-logo & banner images 8 2 nd Prep. Computer & Information Technology

9 4- Adding hyperlinks to other pages 5- Adding text & formatting it 9 2 nd Prep. Computer & Information Technology

10 6- Adding video & link for term2 The final page 10 2 nd Prep. Computer & Information Technology

11 HTML Written Classwork #5 First Question: Choose the suitable correct answer to the following phrases: 1- HTML refers to the phrase a- Hyper Text Markup Library. b- Help Table Made Layout. c- Hyper Text Markup Language. 2- The web page which uses HTML in its design, it is only considered a page. a- Interactive b- Active c- Static 3- Using languages like JavaScript and PHP besides HTML in the design of the web page is to modify the page to a- Interactive b- Homepage c- Subpage 4- To display a text on the web page, we write the text in the. a- Head b- Title c- Body 5- We must save the HTML file with the extension.. a- Docx b- Jpg c- Htm 6- To display the text "italic" on the web page, we use the tag a- b- c- 7- To select the background color of the web page, we use the property. a- bgcolor b- background c- color 11 2 nd Prep. Computer & Information Technology

12 8-The property which is connected to the <img> tag, one of these properties is a- path b- href c- src 9- The <a> tag, is used to inside the web page. a- Align text b- Add a hyperlink c- Play video 10- To select the font type in tag, we use the property.. a- Font name b- Size c- Face Second Question: Match (A) from (B): 12 2 nd Prep. Computer & Information Technology

13 Third Question: Put ( ) or the correct sentence and ( ) for the wrong one: 1-HTML is used to create interactive web pages. (..) 2-JavaScript is used to modify the static page to interactive page. (..) 3-The tag that is written at the beginning of the code to refer that the document is written by html is <title>. (.) 4-To control the number of the spaces between words, use &nbsp. (.) 5-To add image to the web page, we use the <img> tag. (. ) Forth Question: Write the main tags of the HTML file? Five Question: Give a reason? <img src= "school.png"> Although there are no errors in the previous code, the image doesn't display on the web page when loading it by the browser. Sixth Question: Explain what is meant by the following codes: <Title> My School </Title>... <body bgcolor="green">... <Img src = "school.png">... ... <bgsound src="egypt.mp3"> nd Prep. Computer & Information Technology

14 HTML Homework #5 # Write the scientific terminology: 1-.. is a coding language used to create internet pages which are used through an internet browser? 2-..are used to create a web page and an internet browser executes them on the browser page. # Put ( ) or the correct sentence and ( ) for the wrong one:- - To write and edit the HTML tags we use a text editor ( ) - Write the HTML tags between these signs { }. ( ) - Most of the HTML tags start with " < >" and an end with </ >". ( ) - Save the text file with the HTML tags with.html extension only. ( ) - To see the Open HTML file we use a web browser. ( ) - We must write HTML tags in capital letters. ( ) -The main structure for creating a web page using HTML is Head and Title ( ) - </title>...<title> tag is used to define the webpage name. ( ) - To change the direction of the webpage we use "Indent" property ( ) - To write at the beginning of a new line by we use <newline> tag ( ) - To center the text we use the <center> </center> tag ( ) - To add blank space between words we use &space ( ) # Complete the following:- 1-Formats of the webpage can be applied on:.. or on. 2-Formatting the text includes:.,..,. and. 3-Formatting the web pages includes:. and.. 4-To change webpage background color we use the property 5-To add image as a web page background we use the property 6-To insert image inside the webpage use.. tag. 7-To insert Video in the web page use.. tag 8-To insert hyperlink in the web page use the.tag nd Prep. Computer & Information Technology

15 # Write the HTML tags for:- 1-The Structure of creating a web page using HTML. 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 nd Prep. Computer & Information Technology

16 12-Inserting the image pic.png inside the webpage with height 350 and width 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 Making the image in no.12 a hyperlink to the website 1 Culture #5*: a. Who was Zoha Hadid? 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? * Choose only one from the culture questions 16 2 nd Prep. Computer & Information Technology

Website designing by HTML. Home page designing

Website designing by HTML. Home page designing The site designing will be: HTML Practical Classwork #5 Website designing by HTML Home page designing What are home page contents? (Logo-banner-page title-links to other pages-texts-video-audio) 1- Saving