Chapter-5.pptx introduction to HTML and CSS
- 1. Introduction to HTML and CSS CC1/L Introduction to Computing
- 2. Learning Objectives • Learn to make a simple website • Learn the basics of HTML and CSS • Learn how a website works
- 3. HTML means Hypertext Markup Language. It’s basically just a text file with codes that tell the browser how to display the information. To let the browser know the text file contains HTML, we use the file extension .html rather than .doc or .txt or .rtf. Simple HTML
- 4. The first thing you need to know is how to give instructions to the browser. This is done by using tags. The format used to enter a tag is to enclose it in <>. You will need an opening tag and a closing tag. Inside the <> characters, you give the browser and instruction. Simple HTML
- 5. So for illustration, to tell the browser that a block of text is tag_one, the opening tag would be: Simple HTML <tag_one> A closing tag is indicated with a forward slash /. So to tell the browser that we are finished with tag_one, we would write: </tag_one>
- 6. Now let’s get into the structure of an actual HTML document and real tags that are used. The first line in your file is this one: Simple HTML <!DOCTYPE html> As the name implies, this is called the Document Type Declaration. It lets the browser know what type of HTML you are using. As written above, this tells the browser we are using the most recent version of HTML which is HTML 5.
- 7. We also need the opening and closing tag, so our file should look like this: Simple HTML <!DOCTYPE html> <html> </html> Hence anything that falls between <html> and </html> is interpreted by the browser as being html.
- 8. We need a second tag called the head tag contains metadata and other elements that provide information about the webpage. Which is not directly displayed to the user. Simple HTML <!DOCTYPE html> <html> <head> </head> </html> It includes : Metadata storage Title Specification Stylesheets Links Script Loading Browser Behavior Control Favicon Linking
- 9. In the third tag called the body tag that indicates where the content of the web page is placed. So we update our file as follows: Simple HTML <!DOCTYPE html> <html> <head> </head> <body> </body> </html>
- 10. Now we can put the actual content of our web page in between and. To put text, you simply type it as if you were using a web processor. Following the usual practice in teaching computer topics, we’ll add “Hello World” to our web page. Simple HTML <!DOCTYPE html> <html> <head> </head> <body> “Hello World” </body> </html>
- 11. Now let’s move forward by adding some text formatting. First let’s add a couple more lines of text. Maybe we want to print the following: Line breaks and Center Tags <!DOCTYPE html> <html> <body> Hello World! My name is Jayrald. 23 years old. </body> </html> Hello World! My name is Jayrald. 23 years old. Our HTML looks like this:
- 12. To center text, what you do is add a center tag. The open tag to use is <center> and the closing tag is </center>. So we can center the Hello World! string in the following way: Centering Text <!DOCTYPE html> <html> <body> <center>Hello World!</center> My name is Jayrald. 23 years old. </body> </html>
- 13. We can change the appearance of the page again and make it more readable by adding some line breaks. This is done with the tag <br>.Unlike other tags, a closing tag isn’t necessary. You just add one for each line break you want. For now let’s remove the center tag and just add line breaks. So let’s add a line break after the Hello World! string: Line Breaks <!DOCTYPE html> <html> <body> Hello World!<br> My name is Joe. My friend is Sally. </body> </html>
- 14. You can set different attributes using the same font tag. Let’s suppose that we wanted the text to appear red and set the font size to 5. This could be done by writing: <font size=“5” color=“red”>My name is Joe.</font> Font Size and Type Face To change the typeface, we can set the face attribute in a font tag. For example, to set the font of a text string to verdana, we write: <font face=“verdana”>My other friend is Bob.</font>
- 15. Next we explore two more formatting tags that can be used to improve the appearance of your web pages and present content in a meaningful way. The first is the paragraph tag. It does exactly what it says, it creates a formatted paragraph for any text enclosed within the tags (by adding margins and spacing). The paragraph tag is defined by <p> and you must add a closing tag </p> where you want the paragraph to end. Paragraph and Div Tags
- 16. The div tag is used to group together elements into a section and apply formatting to them. So in short it defines a section in your html document. For a simple example, we will take some of the text above and define a section out of it using the div tag, and color the font blue. The div tag is written as <div style=…> and you use a closing tag to end the section as </div>. Paragraph and Div Tags