1. Dr. Nuha El-KhaliliInternet Programming (102 340) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C http://www.w3c.org/http://www.w3c.org/ Text file with the suffix.html or.htm Parsed and interpreted by the browser to display the web page content Separate presentation from content Use any text editor (e.g. notepad) or special SW to edit HTML (e.g. front page)

2. Dr. Nuha El-KhaliliInternet Programming (102 340) HTML HTML defines “Elements” that can be used to mark-up the web page content. An element is indicated using a “Tag” (start tag, content, end tag) This text will appear underlined “Attributes” gives you more control over elements Attributes specify some characteristics of the element

3. Dr. Nuha El-KhaliliInternet Programming (102 340) HTML Page Structure HTML web page consists of two parts: Head & Title tell the browser this is an HTML file information that is not displayed, but helps the browser. tag is part of the head tag the content of the page that will be displayed

4. Dr. Nuha El-KhaliliInternet Programming (102 340) First Example My First HTML page This is the body of my page. This part will be underlined

5. Dr. Nuha El-KhaliliInternet Programming (102 340) Headings & Alignment Six size headings: – Biggest size Heading – Size 2 Heading – Size 3 Heading – Size 4 Heading – Size 5 Heading – Smallest size Heading Text alignment can be: center, left or right Heading OR Heading

6. Dr. Nuha El-KhaliliInternet Programming (102 340) FONT Font element controls font format and color Attributes: –Color=red –Size=5 –Face= “Arial” Color can be specified in Hexadecimal, e.g. red=“#ff0000” Font size 1..7 (default 3) YOUR TEXT

7. Dr. Nuha El-KhaliliInternet Programming (102 340) Images element inserts an image in your page (Stand alone tag) Attributes: –SRC=“url” location of the image file –ALIGN=top dictates how text will be displayed in relation to your image (right, middle, left, top, bottom) –WIDTH=100 HEIGHT=70 image size –ALT=“text” alternate text if image is not downloaded

8. Dr. Nuha El-KhaliliInternet Programming (102 340) Links Hyperlink: a navigational tool to link documents –Decide which words to use a link –Get the URL of the linked document –The hyperlink element: link word –HREF attribute specifies the address to link to: HREF="URL" –Target=“_parent” destination of the loaded document (_top, _blank, _self or frame name) Leeds Computer School http://scs.leeds.ac.uk Send me email

9. Dr. Nuha El-KhaliliInternet Programming (102 340) Internal Links Assign a specific location in the HTML file a name (bookmark it) Now you can link to this specific location using a hyperlink tag internal link

10. Dr. Nuha El-KhaliliInternet Programming (102 340) Other tags begin a new paragraph (leave a blank line) force text to start on the next line put a thin black line across your page underline text emphasis text make text bold and for superscript and subscript &#code; Special characters (e.g. "Γ" gamma ) put comments in your code

11. Dr. Nuha El-KhaliliInternet Programming (102 340) Other tags Unordered list (UL) Item 1. Item 2. Ordered list (OL) <!- type can be “I”, “A”,”a”,”i”  Item 1 Item 2

12. Dr. Nuha El-KhaliliInternet Programming (102 340) More on Header Use the Meta tag to describe your webpage and to help the search engine categorize your page Attributes: –Name=“keywords”: identifies a property name –Content=“”: specifies a property's value

13. Dr. Nuha El-KhaliliInternet Programming (102 340) Body Attributes BGCOLOR=white background color for the entire page TEXT=black color of the page's text LINK=White color of your hyperlink ALINK=green color when clicking the hyperlink VLINK=red color of visited links BACKGROUND=“logo.jpg” image as a page background

14. Dr. Nuha El-KhaliliInternet Programming (102 340) Tables TABLE CELL, is the basic unit of a cell TABLE ROW, horizontal row of cells Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 1Cell2 Cell4cell5 Cell3 Cell6

15. Dr. Nuha El-KhaliliInternet Programming (102 340) Tables Table attributes: –Border= 4 thickness of table border –Width= 400 or 30% –Align=“left” or “center” or “right” –BGCOLOR= Red table background color –CELLSPACING amount of space between table cells. –CELLPADDING pixels of space inside the cell between text and the border TD tag attributes to align text in the cell: –ALIGN: left, center or right –VALIGN: top, middle or bottom or baseline

16. Dr. Nuha El-KhaliliInternet Programming (102 340) Tables table header tag Header row definition Header cell definition table caption on the top : format a group of columns – – number of columns affected

17. Dr. Nuha El-KhaliliInternet Programming (102 340) More on Tables To extend a data cell to more than one column, use attribute Colspan To extend a cell over a number of rows, use the attribute Rowspan Table Example

18. Dr. Nuha El-KhaliliInternet Programming (102 340) Frames Displaying more than one web page on the same screen (no body tag) tells the browser how to divide the window into columns and rows, and how big is the size of each tells the browser what to put into the columns and rows specified

19. Dr. Nuha El-KhaliliInternet Programming (102 340) Frames You can nest frames to get a combination of horizontal and vertical windows provide an alternative for browsers that does not display frames attributes: –Scrolling=no, yes, auto: place scroll bar on the frame –Noresize: stop the user from changing the frame size –Frameborder =0 or 1: Do not draw borders between frames

20. Dr. Nuha El-KhaliliInternet Programming (102 340) Frames The target attribute in a hyperlink takes values: –_blank : load in a new browser window –_parent: load into immediate FRAMESET parent of the current frame –_self: load in the same window as the hyperlink –_top: load in the full original window –Frame name: variable specified in “Name” attribute of a frame

21. Dr. Nuha El-KhaliliInternet Programming (102 340) Image Map Divide the image into different hotspots that link to different places : defines an image map : defines a hotspot in the image Add “USEMAP” attribute to your image tag

22. Dr. Nuha El-KhaliliInternet Programming (102 340) Forms Get user input (textbox, buttons, pull down Box) declare a form in your page Attributes: –Name: identification of the form –Action: The file name that will process the data –Method: How the data will be sent to the server GET: (URL?dataname=datavalue&dataname=datavalue) Post: environment variable as part of the HTTP request Do not nest forms

23. Dr. Nuha El-KhaliliInternet Programming (102 340) Forms Text Box: one line input box More attributes: readonly / disabled You can add label for each text box First Text Password: one line input box, but data appear as *’s Hidden: value not displayed but submitted with the form

24. Dr. Nuha El-KhaliliInternet Programming (102 340) Forms Radio buttons: select one choice from a group Checkbox: select more than one choice from a group Choices that belong to one group should have the same name Text Area: multi-line text input box This text will appear inside

25. Dr. Nuha El-KhaliliInternet Programming (102 340) Forms Pull Down Box: option 1 option2 Buttons:

26. Dr. Nuha El-KhaliliInternet Programming (102 340) More on Forms Image submit button: Field set: place a frame around some of the form elements and write a caption for that part Caption to identify this part