Transcription
1 Unit Two
Reading: How to create a website using html pdf download
2 Creating web pages using HTML Objectives General objective: Creating a web page using HTML Behavioral objectives: By the end of this lesson, students will be able to: the identify the following basic rules to create a web page based on HTML. Identify the structure to create a web page using HTML. Add content to web page (text, image, video, hyperlink, etc.) Format web page content. Inserting a hyperlink into the website / linking the pages of the website. 80 Computer Information Technology and Communication
3 HTML (Hyper Text Markup Language) In the previous lessons we know the main steps to create a website. One of the main phases in creating a website is the execution phase, when the paper design becomes a web page where all the data, text, images, videos and sound files are entered. This is done after designing each web page and creating hyperlinks between the pages using a programming language. – In this lesson we will know in detail how to use HTML to create a web page. Then we will see in detail how to create a مدرستي website. مدرستي Main Page About Us- Photo Album Vision Mission- Contact Us Vision and Mission Vision: – Prepare an outstanding student who is able. Mission Develop students’ abilities. website pages. ” مدرستي ” Second Year Chart Prep 81
4 HTML: -It is a coding language used to create Internet pages that are used through an Internet browser. HTML codes: HTML codes are used to create a web page, these codes are called tags. An internet browser executes these tags on the browser side. To create a web page with HTML tags, do the following: – Create a text file with a text editor to write and edit the HTML tags. – Write the HTML tags between these characters . – Write most tags with a beginning ” ” and an ending ” “. – Save the text file containing the HTML tags with the extension.htm or.html. – Open the saved file with a web browser and see the result. – Write HTML tags in uppercase or lowercase. 82 Computer Information Technology and Communication
5 The structure for creating a web page with HTML Activity (1) Together with your classmates and with the help of the teacher, identify the structure for creating a web page with HTML tags. Steps to follow: – Upload a text editor program. – Write the tag at the beginning of the code to indicate that the document is written in HTML. -The HTML tag is divided into two parts: 1- Head: The part where the page information for the browser like the page title is written. 2- body: the part where the content is written. So the structure of the tag file is as follows Writing the structure to create a web page with HTML in a text editor The structure of a web page created with HTML Sophomore Prep 83
6 Consider the structure for creating a web page using HTML tags: Type at the beginning of the tags to refer to the document written in.html – The HTML tag is divided into two parts: 1 – Head: The part where the page information for the browser is entered. 2- body: the part where the content is written. Add a web page title with the tag …
8 Adding a Content to a Web Page (Text-Image-Video-Hyperlink) The web page can contain text, image, video and hyperlinks First: Adding a Text to the Web Page: To add a text ” جميلة ونظيفة ومتطورة “مدرستى to add content to the website. Activity (3) Work with your classmates and with the help of the teacher as follows: – In the previous text file, enter the phrase ” مدرستى جميلة ونظيفة ومتطورة ” in the tag. – Save the text file with the same title “school.htm”. – Open the “school.htm” file with Internet Explorer to see the result of the tags you entered.Opening the web page with Internet Explorer 86 Entering the code in the text editor Computer Information Technology and Communications
9 Exercise Using the previous exercise and with the help of the teacher, the students do the following: – Enter an HTML tag for previous practice with capital letters. – Leave spaces between the words of the text. – Use the Enter key to leave lines between words of text. – Save the text file with the extension.htm. – View the file with Internet Explorer. Important Notes: – You can write the HTML tags in uppercase or lowercase. – Internet Explorer is not affected by the left spaces in the file or by moving to a new line by pressing Enter. Changing the direction of the web page using the “dir” property When designing a web page with Arabic view, we need to change the direction of the page to adapt the content from right to left for the Arabic language and to do this, we use the “dir” property, where we indicate the direction of the web page according to the value of the dir property as in the table below. Value Effect Rtl Ltr Right to Left Left to Right Second Year Prep 87
10 Activity (4) In collaboration with your classmates and with the teacher’s help, use the previous exercise to change the direction of the Contents of the web page are as follows from right to left: – Editing the code by adding the directory to the tag. – Set the dir property to rtl to change the direction to . – Save the text file. – Open the web page file with Internet Explorer so that it looks like this: The web page with Explorer The right-to-left direction of the content Entering the text in the text editor 88 Computer information technology and communications
11 exercise Compare together with your classmates and with the help of the teacher, the effect of the value “rtl” and the value “ltr” on the Dir property on the direction of the web page content. The direction of the content The direction of the content from left to right from right to left (A comparison showing the effect of the values of the dir property) Web page formatting There is many formats that can be applied to the web page content to make it look more attractive. Some of them are applied to the text of the web page and some of them are applied to the background of the web page: Formatting the text involves many processes including o typing the start of a new line o text alignment o putting spaces between words o formatting the font (font , Volume, Cooler, Style) Formatting the web pages includes: o Changing the cooler of the web page background. o Set an image as background web page. Second Year Prep 89
12 First: Formatting the text on the web page: 1-Writing at the beginning of a new line with the
tag. To display the text on the web page on two lines we use the
tag, using this tag, to write on a new line we use the
tag. Activity (5) In cooperation with your classmates and with the help of the teacher, do the following: – Open the previous text file. – Add
tag and text “Name: Mohamed Khaled”. – Save the text file with the extension.htm. – Open the file in Internet Explorer. Note that the text content appears on two lines Writing the code in the text editor The web page through Internet Explorer after running the code 90 Computer information technology and communications
13 Formatting the text in the web page 2- Centering the text by tag. To place text in the middle of the line, we use the tag. Activity (6) Collaboration with your classmates and with the help of the teacher: – Open the previous text file. – Add the school location . – Save the text file with the extension htm. – Open the file in Internet Explorer. – Notice that the phrase “school location” appears in the middle of the line. The web page after running the code Formatting the text on the web page Entering the code in text editor Year Two Prep 91
14 3- Add spaces between words by   If you leave any number of spaces between words in the file explorer will handle it considering the page as a space. To control the number of spaces between words, we use the   symbol. We repeat it according to the number of spaces needed between words. Activity (7) Collaboration with your classmates and with the help of the teacher: – Open the previous text file. – Writing the code site  , the school – Save the text file with the extension.htm. – Open the file in Internet Explorer.Notice the phrase “school website” and put four spaces between the two words, as in the following diagram: The web page after running the code Writing the code in the text editor 92 Computer Information Technology and Communications
15 formatting the font in of the web page (font, size, color) 4-a Format the font on the web with To control the font, size and color of the font, the font is formatted with tag and this is a tag that has a set of properties. Property Face Color Size Function Choose the font Choose the font color Choose the font size Notes: To change the font size we must note that the browser recognizes seven different font sizes that we select through the “Size” property, the value is from 1 to 7. Activity (8) How to create a web page that is right aligned and contains the text ” 6. with Andalusian face, red color and size “ومتطورة With the help of the teacher, the students do the following: – Write the code . – Save the text file with the extension.htm. – Open the file in Internet Explorer. مدرستى جميلة ونظيفة Second Year Prep 93
See also: How to Make a Data Flow Diagram
16 Notes: – After using the closing , this terminates the tag’s effect on any text that is written later, and after that the text becomes with the default form displayed . – If we don’t use the tag, the colored face will be displayed on the web page with the default face. 94 Computer information technology and communications
17 Formatting the font on the web page (underline/bold/italic) 4-b Formatting the font on the web page There are several tags through which the font can be formatted. Some of them are listed in the table below: Tag Function Underline Bold Italic Activity (9) To change the previous web page file, format the font by typing the expression ” ” Go with the help of the teacher the students as follows: – Add the following code: مدرستى جميلة ونظيفة ومتطورة – Save the text file with the extension.htm. – Open the file in the browser. Second Year Prep 95
18 Practice With the teacher’s help, students do the following: مدرستى جميلة ونظيفة ومتطورة ” Sentence – format the font on the web page to include the “italics. مدرستى جميلة ونظيفة ومتطورة ” phrase – format the font on the web page to make the ” bold. Note that: – To format the font as italic we write the code: مدرسeuten جميلة ونظيفة ومتطورة – To format the font we write the code: b/> 96 computer information technology and communication
19 Second: format the background of the web page. Ministry of Education 1- Choosing the background color for the web page through the bgcolor property We use the bgcolor property associated with the tag to choose the color of the web page background. Activity (10) Collaboration with your classmates and with the help of the teacher: – Write the tag Write the code in the text formatting The table below gives some names of colors that can be used as a value for Property bgcolor Color Color Name Blue Brown Black Green Red White Yellow Purple Sky blue Formatting the web page background Year Two Prep 97
20 2- Adding an image as a web page background through the Background property Use to add an image as a web page background we have the Background property, which refers to the tag. Activity (11) Work together with your classmates and with the teacher’s help: – Prepare an image file to be used as a background for a web page. – Save the image in the same folder that is saved on the webpage. – Write the necessary code to add the image as web page background “image1.jpg” – Save the text file with the extension.htm. – Open the file in Internet Explorer. Notice the image display as the webpage background. Writing the code in the text editor The web page after executing the code 98 Computer Information Technology and Communications
21 Handling images on the web pages: 1- Insert the image inside the web page through the tag. 1- To insert an image in the web page we will use the
tag by selecting: the location where we will save the image file and the name of the file and we will do it through the src property to the
tag. Activity (12) With the help of the teacher, the students design a web page with the following content: – The text ” مدرستى جميلة ونظيفة ومتطورة ” is red and underlined. – The school picture is displayed below the text. Second Year Prep 99
22 Activity With the teacher’s help, students search the Internet for types of image file extensions that we can use on the web pages. Important notes: – In the previous practice, the image file and the web page file must be in the same folder, so we write the image file name and its extension with the src property.- In case an image file is in another folder, we need to write the full path of the image file. Formatting the images in the web pages: The inserted image can be formatted and aligned to the web page by controlling the dimensions (height & width). 1- Image size control on the web page. We control the image dimension through the properties of the tag as follows: – The Height property. E.g. Height= “200” – The property width. E.g. width = “300” We use the unit “pixels” to measure the image dimensions. 100 Computer Information Technology and Communication
23 Activity (13) With the help of the teacher, the students insert the picture and set the dimensions as follows: Width = 800 pixels Height = 450 pixels In the previous workshop we wrote the following code: 
Second Year Prep 101
24 Handling images on the web page: 3- Align the image from within the web page We align the image using the Align to the tag property and the property has the following values: Value Right Left Middle Bottom Top function Aligns the image to the right Aligns the image to the left Centers the text in the middle of the Image The text is positioned Align the image below The text is positioned Align the image above Activity (14) In collaboration with your classmates and with the help of the teacher, modify the web page in the previous exercise as follows: – Format the image around the text with the picture in the same en line and align the text in the center of the image. – Save the text file with the extension.htm. – Open the file in Internet Explorer. 102 Computer information technology and communication
25 “Align the text with the picture on the same line and the text in the middle of the picture” Exercise Work together with your classmates and with the teacher’s help: – Align the picture to the right of the website. – To align the image with the position of the text, align the top of the image. Notes – To align the image to the right on the web page, the code is align=”right”. – To align the image so that the text is positioned at the top of the image, the code is align=”right”. Second Year Prep 103
26 Dealing with the sound on the website. Add the sound as a background sound using the tag. We can put the sound as background in the web page to listen when we download the web page through the browser. Important notes: We must note that “Internet Explorer” is the only browser that supports the tag to insert the sound as a background in the web page. With and the following property src we add the sound to the web page as a background. The src property of the tag takes the value of the sound file name and its extension (and this is in case we save the sound file in the same folder as the web page file. Also, we need to write the full file sound path). Activity (15) Creating a website that plays the sound file “Egypt.MP3” when opened in the “Internet Explorer” browser. With the help of the teacher, the students change the code as shown in the picture. – Save the text file with the extension htm. – Open the web page file in Internet Explorer. 104 Computer information technology and communication
27 Dealing with the video on the web page Embedding the video on the web page by tag By using the tag, we embed the video on the web page. We must note that the tag supports video file of type (.swf -.avi -.mov). We insert the video using the tag and the following property src. The src property value takes the name of the video file and its extension (in case we need to save the video file with the web page file in the same folder and write the full video file path). Activity (16) With the help of the teacher, the students create a web page that contains a video that we can play on it (internet.avi) The web page in the browser Hyperlink Second year Prep 105
28 Insert hyperlink on the Website by the tag . Hyperlink is a hyperimage or hypertext associated with a title and when we click on it we go to that title and it can be on the same page or on another, on the same website or on another. Practice collaborating with your classmates and with the teacher’s help, do the following: – Download the Ministry of Education website. – Look for hyperlinks (hypertext or hyperimage) on the pages of the website. Follow these hypertexts and images by clicking on them. – – Discuss with the students the different forms of hyperlinks (on the same page, between site pages, between the site page and its hyperlink to another page on another site.Hyperlink: to insert a hyperlink we use the href property on the that selects its value; the required title we want to switch to like this: the text or image 1- Put the hyperlink text by mark. To insert a hyperlink text (hypertext) into the tag using the href property. Activity (17) In collaboration with your classmates and with the teacher’s help, create a web page containing hyperlinked text ‘Ministry of Education’. If we click on it, it will switch to the main page of the ministry. With the help of the teacher, the students enter the code of the website as follows: Ministry of Education The address of the ministry’s website to which we want to go Appears as hypertext in the browser Hyperlink Second Year Prep 107
30 The steps to create and run a hyperlink text 1- Enter the code in the text editor and save it 2- Open the web page in the Browser 3- Click on the hypertext on the web page 4- The Ministry of Education website will load 1- Enter the code in the Ministry of Education text editor 3- Load the Ministry website 2- Open the web page in the browser and if we click on the hypertext, the ministry’s website will be loaded 108 Computers, Information Technology and Communications
31 2- Inserting a hyperlink to an image To create a hyperimage we must do the following : – Show the picture with the tag . – Insert
in to make it a hyperlink. Activity (18) In collaboration with your classmates and with the help of the teacher, create a web page that contains a hyper image and when we click on the image we will go to the My School web page – Change the code on the previous one Web page to replace the text with the image “tools.jpg” to change the hypertext to a hyperimage like this:
The title of the web page we need to go to Appears as a hyperimage in the browser Hyperlink Second year Prep 109
32 The steps to create and run a hyperimage 1- Write the code in one of the text editors and save it 2- Open the web page in the browser and when we click on the hyper image, the “My School” web page will be loaded. 3- The “My School” web page will be loaded. 1- Write the code in one of the text editors and save it. 3- The web page “My school” is loaded. 2- Open the web page in the browser and when we click on the hyper image, the web page “My school” is loaded. 110 Computer Information Technology and Communication
33 Think of some HTML tags to create a web page like this: Tag
… … … Answer the questions using the MS Word program from the answer file of the fourth Lesson in Folder (Sample Answer and Projects) 116 Computer Information Technology and Communication
39 A question in preparation for the next lesson: After creating a web page and adding its content. How to create a website? Second Year Prep 117
40 Projects 118 Computer Information Technology and Communication
41 The First Project A Practical Website Design Project “My School Website” Second Year Prep 119
42 Objectives The general objective: create a website using an HTML language The specific objectives (practical) At the end of this lesson the student will be able to: Indicate the number of website pages from the structural design of the website. Create the different pages of the web with HTML. Insert a hyperlink between the pages of the website. Creating the project “My School Website” My School Homepage About the School Photo Album Vision Vision and Message The School Vision: Prepare an Outstanding Student, the Message: Developing the Student’s Skills Photo Album About the School The Date of School Construction: School Address.. School Telephone 120 Computers, Information Technology and Communication
43 A Structural Design of My School Website Project Creating my school website From the Structural Design of the website, it consists of five web pages as follows: 1. The My School home page is called Home .htm saved. 2. The About School web page is saved as About.htm. 3. The Photo Album web page will be saved as Photo.htm. 4. The Vision and Message web page is saved as Vision.htm. 5. The Contact Us web page will be saved as Contact.htm. Each webpage is created and saved as a text file created by HTML. Second Year Prep 121
44 Creating the “Home Page” Home.htm My School Home Page About the School Photo Album Vision and Message Contact The home page consists of: – The text “مدرستى” The font (color: red type: Tahomasize: 6) – Five text hyperlinks. – Image The code of the “Home” web page as follows: 122 Computer Information Technology And Communication
45 Creation of the “About School” web page about.htm The “About School” web page consists of: – Texts: ” The date of construction” “The school address” The school telephone” – The writing (color: red – Font: Tahoma Size: 6) – Video – Image hyperlink (by clicking we return to the home page The code from the web page “About the school ” as follows: About the school The date the school was built The school address..the school phone Second year Prep 123
46 Creating the “Photo Album” web page photo.htm The web The “About School” page consists of: – the text “Photo Album” – the font (color: red font: Tahoma – size: 6) – 3 images – image hyperlink (click to return to the home page) the code of the web page “About School” as follows: Photo Album Creation of the “Vision and Mission” website vision.htm 124 Computer Information Technology And Communication
47 The website “Vision and Mission” consists of: – the text “Vision and Mission” – the writing (color: red writing: Tahoma – size: 6).- The text “The School Vision” The code of the website “Vision and Mission” as follows: Vision and Mission The School Vision: Prepare an outstanding student who is capable of Message: Developing the student’s abilities. Second Year Preparation 125
48 The Second Project 126 Computer Information Technology and Communication
49 Using your teacher draft, create and save the following: First: a text file containing the text editor program, which includes: the Concept of the following: Website Website Homepage – Static web pages Interactive web pages – The steps to create an audio file as follows: First: Prepare Second: Run an audio file Third: Change the audio volume Fourth: Export audio to the file. – The steps to create a video – The steps to save the video project – Save the project. – Follow the steps to change the video recordings. – The steps to export the video to a file with an available extension. Second Year Prep 127
50 Second: Create a presentation on building web pages with HTML that includes: The next major rules for building web pages with HTML tags. The structural steps to create a web page through HTML tags. Adding content to the web page (text-image-video-hyperlink) Formatting the content of the web page. Insertion of a hyperlink within the website / between the pages of the website. 128 Computer Information Technology and Communications
See also: 10 Tips for Creating a Profitable App
.
