HTML ICT Grade 9 PDF

ICT Department ICT Grade 9 WE PROVIDE THE BEST ICT Department  ICT Department Lesson One Basics of HTML What is HTML? HTML stands for Hyper Text Markup Language. HTML used to...

ICT Department ICT Grade 9 WE PROVIDE THE BEST ICT Department  ICT Department Lesson One Basics of HTML What is HTML? HTML stands for Hyper Text Markup Language. HTML used to design web pages; it is the Mother tongue of the internet. In other words HTML is a markup language for describing web pages. A markup language is a set of markup tags. HTML Tags/Elements: Many people considered that both terms (tag and element) are the same, but there is a little difference between the two terms. Tag: HTML codes written between angled brackets , and each word is called tag. Characteristics: HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a forward slash inserted before the tag name. Tags Types: There are two kinds of tags: container and empty. Container Tag: which has an opening tag and a closing tag. opening tag closing tag Empty Tag: which has no content, stands alone and do not require a closing tag. Ex.: adds a line break. adds separator horizontal line.  ICT Department Lesson Two Elements of HTML The HTML element is everything from the start tag to the end tag. my name is …… 3) Attribute: A command inside the tag. Characteristics: All HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value" Ex: Case Sensitive HTML is not a case sensitive language. This means, that you can use either lowercase or uppercase. is the same as. Basics Of Creating Webpage Using HTML - HTML Structure Any HTML document is like a human being, has two parts head and body. &  ICT Department - Hint: hyperlink is to link any webpage with another webpage, so we must use the tag Add Title, Tag: helps you to add a title to your website. Activity1: Design a webpage titled "My first web age" Let`s Start Write HTML Using Notepad Step 1 How to open NotePad: Start All Programs Accessories Notepad Step 2 Type the following code: (notice how to close tag) My first web page The text between and provides a title for the document  ICT Department Step 3: How To Save File Save As Type file name.html Click save button Note: you must save your file with two extensions:.html to save file as a web page. Step 4 View the HTML Page In Your Browser Open the saved HTML file in your favorite browser (Double click on the file, or right-click - and choose "Open with"). Notes: The text between and describes an HTML document  ICT Department The text between and provides information about the document The text between and describes the visible page content. Lesson Three :HTML Tags (Formatting )&Adding Contents) Add Text To add text to your web page, we use tag. Or just type the text you want to add in body tag. defines a paragraph The tag helps to separate your text into lines and paragraphs. tag has two attributes:- Align (right –left - center) / Dir (“RTL"-“LTR") Change Page Direction, Attribute dir defines a page direction. Its value may be rtl (right to left), or ltr (left to right).  ICT Department Line Spacing, Tag The , an d tags help to separate your text into lines and paragraphs. defines a line break. Alignment In Center, Tag defines allocating any sentence in the center of the page.  ICT Department Add Space between Words, &nbsp; &nbsp; defines Non-breaking space. Create white space between words. Change Background Color, (bgcolor) Attribute  ICT Department Bgcolor defines the webpage background color. It's an attribute in body tag (). Add Background Pictures, (background) Attribute Background defines specifies a background image for a webpage. It's an attribute in body tag. ().  ICT Department Lesson Four: HTML Tags (Formatting the font of Web page) Font Format, Tag The font family property defines the font used. Font attributes are: o Size: specifies the size of text. o Color: specifies the color of text. o Face: specifies the style of text. Font Styling, Tags  ICT Department Are formatting elements were designed to display special types of text: : specifies bold text. < i >: specifies Italic text. : specifies underlined text. Lesson Five: HTML Tags (Inserting Multimedia To The Web Pages) Part 1 Insert Image, Tag In HTML, images are defined with the tag. The tag is empty. Note: To insert an image you must first save images and project in the same folder. Control Image Dimensions (Height & Width) / (Image Size): WIDTH: specifies the width of the image is in pixels. It can range from 1 pixel to any number but less than the website width. Height: specifies the height of the image is in pixels. Note: It can range from 1 pixel to any number but less than the website height. Before inserting a picture you must first know some attributes: SRC: "Source", it's telling the browser where to go and find the image. ALT: "Alternate text", it`s telling the browser that if it can't find the image, then just display this text. Image Alignment, Align Attribute Align: describes the position of the image on the webpage. Align value may be right, middle, or left.  ICT Department Note: image measurement unit is pixel. Project: 1-Open Notepad Program. 2-Type the following code. 3-Save the project (type file name. html). 4-Open your web browser to show the webpage you designed. Part 2 Insert Background Sound, Tag  ICT Department tag is used to play a soundtrack in the background. Insert Background Video, Tag The HTML tag represents a container for external application or interactive content. Hyper Link Before working on our project let`s first study what`s meant by Hyper link and URL. Hyper Link: It is a picture or text that links to another place in the same site or to a different site, as shown in the following figure "download now" is a hyper link. URL: Stands for Uniform Resource Locator.Every website has an address called the URL, as shown in the following figure: http: Hypertext transfer protocol. www: World wide web. myschool.com: The domain name and the name of the site. Insert a Text as a Hyperlink, tag The hyper link tag … This is the tag you use to create a hyper link. Hyperlink Tag Attributes:  ICT Department Before starting your project you first must know some attributes. o Href: stands for hypertext reference. It is telling the browser that there is a hypertext link coming. You need to always put an equal sign (=) after href. Hyper link will be www.google.com written after the equal sign and written between double quotations. Project Type the following code Amer Google