Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C 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)

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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 Send me

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

Dr. Nuha El-KhaliliInternet Programming ( ) 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

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

Dr. Nuha El-KhaliliInternet Programming ( ) 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