2. 1 Essential HTML coding By Fadi Safieddine (Week 2)

3. 2 Lecture Content Importance of knowing about HTML Defining HTML Creating HTML page Creating title. Create paragraphs and texts. Creating hyper links Inserting background Inserting images and changing attributes Changing text attributes. Color Type size

4. 3 Importance of knowing about HTML! While some may argue rightly that with 4 th generation Web programming tools, why do we need to learn HTML? For editing reasons. To be able to read other people’s work. To be able to incorporate scripts to your HTML page (not always supported by packages).

5. 4 What is HTML What is HTML? Stands for Hyper Text Markup Language. It is not a programming language such as Java, C, Pascal, or Basic. It is based on tags and attributes that would allow a browser such as ‘Netscape’ or ‘Internet Explorer’ to render a document on a computer screen. Tag: … You don’t need a package to write HTML. All you need is a word document or ‘Notepad’ and save your document as (.html)

6. 5 What is HTML To start an HTML document: Open the ‘Notepad’ from your PC (Click ‘Start’, go to ‘Programs’, then ‘Accessories’, then click on ‘Notepad’) We are going to start our HTML with the first tag: and we would end our page with. An HTML page has two main sections: Heading Body So far it is an empty HTML page, next we start building our HTML page step by step.

7. 6 What is HTML Within the tags, we want to insert a tag to create a heading on the browser and a welcoming statement. For heading title the tags are ……. For example if you write: My first HTML page, 2003 The result would be:

8. 7 What is HTML

9. 8

10. 9 So far, our HTML page doesn’t have a body! To start typing your text, you start the body tag : …. Within the body, you would specify paragraphs, background, images, fonts, font style..etc using tags again. Say we want to welcome people to our first ever HTML page.

11. 10 What is HTML

12. 11 What is HTML There are many tags to remember as we start learning how to create pages in HTML. For instance: … for header level 1 (you can also create headers levels from 1 –6) … for underling a text. … for italic text. … for bold text. … a new Paragraph Lets see how all these tags can be used for our first page.

13. 12

14. 13 What is HTML Creating a hyperlink in HTML: HTML uses the … tag for Anchors (for links) However this tag has an attribute to create the link. This attribute is HREF. So to create a yahoo.com link on HTML page: …. In the empty dots you would write whatever text you find fit. For instance if we want people to ‘Click here’ to connect to yahoo

15. 14

16. 15 What is HTML Creating a hyperlink in HTML: Using the hyperlink tag we can also create email link. Say you want people to be able to contact you from the Website. My email address mailto:fadi@uel.ac.uk

17. 16

18. 17 What is HTML Next we will check how to place a background to the Web page and a picture. The background is part of the attribute of tag. This attribute is called BACKGROUND! …. Remember to put the picture in the same directory for it to connect to the page.

19. 18

20. 19 What is HTML Inserting a picture is bit challenging. Images are inserted using tag … and this tag has few interesting attributes: SRC (Source) stating where the picture is located. SRC = “Fadi2.jpg” BORDER creating a border for image. BORDER = “1” HEIGHT & WIDTH used to state the high and width, if you want to state fixed size for image. The size is done in pixels. HEIGHT = “200” WIDTH = “200” ALT for attribute. It is the text the shows up when mouse is over the picture. ALT = “Fadi image”.

21. 20

22. 21 What is HTML Finally we will check how to change color of text, type of text, and size of text. Changing the font is part of the attribute of tag. This attributes are called: COLOR = “red” SIZE = “+1” FACE = “Arial”. ….

23. 22

24. 23 Next week Advance elements of HTML programming. Tutorials: Review of HTML Coding. Class exercise. Practical: Creating a Web page with Notepad.