Hypertext Markup Language l Markup language Embedded codes
Hypertext Markup Language l Markup language: ¡Embedded codes in documents ¡Codes are called `tags’ ¡Codes l Describe the structure documents l Include instructions for processing l Computer language for describing syntax of tags l HTML: l make for publishing hypertext on the World Wide Web l Allow to embed other scripting languages to manipulate design layout, text and graphics l Platform independent 2
Web Page Development Cycle EDIT and SAVE the file in your AFS p: webindex. html TEST by BROWSING to the page http: //www. msu. edu/~msunetid/index. html
Write HTML Using Notepad Step 1: Open Notepad l Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad. l Windows 7 or earlier: Open Start > Programs > Accessories > Notepad l Step 1: Open Text. Edit (Mac) Open Finder > Applications > Text. Edit In Preferences > Format > choose"Plain Text"
Write HTML Using Notepad l Step 2: Write Some HTML ¡Write HTML into Notepad. 5
HTML File l Step 3: Save the HTML Page
HTML File l Step 4: View the HTML Page in Your Browser l Open the saved HTML file in your favorite browser
Tags An HTML element starts and ends with tags —the opening tag and the closing tag. 1. Tag consists of an opening angled bracket (<), some text, and a closing bracket (>). 2. Inside a tag, there is a tag name; there may also be one or more attributes l Tags <html><body> <head>…. etc
Attribute l Each attribute is made up of a name and a value, name="value“
HTML Basics 3 Parts to HTML document ¡DOCTYPE l. What DTD are you using ¡Head l. Meta information l. Only <title> is required ¡Body l. Text to render 10
HTML File Structure <HTML> <HEAD> </HEAD> <BODY> </HTML>
HTML Elements There are two major sections inside the html element: the head and the body. HTML Elements Body Element Paragraphs Images Link Table, frame, form, etc…. Head Element Meta Element Java Script Title Element CSS markup
Head element contains information about the page, but no information that will be displayed on the page itself. The opening<head> and closing tags </head> Title element tells the browser what to display in its title bar (the title bar is the very top part of the browser window) The opening<title> and closing tags </title> Meta element can be used in a web page for different reasons. Some are used to provide additional information that’s not displayed on screen to the browser or search engines for example: <meta charset="utf-8"/>
Structural Tags <HTML> These tags enclose the entire Web page document. </HTML> <HEAD> These tags enclose the Head part of the document </HEAD> <TITLE> These tags enclose the title of the document. This text appears in the title bar in the browser and on the bookmark list if someone bookmarks your web page. </TITLE>
Example 1 <head> <title>Computer Sciences </title> <meta charset="utf-8"/> </head>
Header Tags -- Used for marking sections and subsections in a document. <H 1>Header 1 -- Giant-sized and bold </H 1> <H 2>Header 2 -- Large and bold </H 2> <H 3>Header 3 -- Normal-sized and bold </H 3> <H 4>Header 4 -- Small and bold </H 4> <H 5>Header 5 -- Very Small and bold </H 5> <H 6>Header 6 -- Tiny and bold </H 6>
H 1 = Giant-sized and bold H 2 = Large and bold H 3 = Normal-sized and bold H 4 = Small and bold H 5 = Very Small and bold H 6 = Tiny and bold
Body element contains almost everything that you see on the screen: headings, paragraphs, images, any navigation that’s required, and footers that sit at the bottom of the web page
Example 2 <HTML> <HEAD> <TITLE> My First home page </TITLE> </HEAD> <BODY> My name is your name. My major is your major. </BODY> </HTML>
- Slides: 19