The basic structure of any HTML

The basic structure of any HTML The basic structure of any HTML page is: <html> <head> <title> Your web page title here </title> </head> <body> ** [all the HTML for display] ** : : : : : : </body> </html> CENG 449 Lecture 1

Example <html> <head> <title> My First Web Page </title> </head> <body> Hello ALL. Hello ALL. Hello ALL. Hello ALL. </body> </html> Result is: CENG 449 Lecture 1

• HTML • Hypertext Markup Language • A Computer language used to add objects and other information to a Web page • Not a programming language, it’s a markup language • Markup Language • A set of markup tags • HTML Tags • Surrounded by angle brackets <> • <html> • Come in pairs • Content Here • Start Tag = first tag —also called an opening tag • End Tag = second tag —also called a closing tag • HTML Documents = Web Pages • Describe Web pages • Contain HTML tags and plain text • XHTML • Extensible Hypertext Markup Language • Very similar to HTML—same concept • Newer and Stricter than HTML, but the two terms are often used interchangeably • A sort of cross between HTML and XML (Extensible Markup Language) • XML • A set of rules used to encode electronic documents • Employed to increase compatibility among electronic documents and satisfy current Webstandards • Employed to increase compatibility between electronic documents and the Web • CSS • Cascading Style Sheets • A type of computer language used to specify how a web page should be presented • Font colors, positioning, line spacing, borders, etc… CENG 449 Lecture 1

HTML strict document type declaration • DOCTYPE • Document type declaration • Always the first thing typed into your HTML document • Appears BEFORE opening tag • Tells the browser which version and what type of (X)HTML you are using • Does not display as visual content on your Web page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> CENG 449 Lecture 1

HTML Tags CENG 449 Lecture 1

HTML Heading Tags • Headings are achieved in HTML by "tagging" certain chunks of text with heading tags. The format for a HTML heading tag is: <hN>Text to Appear in Heading</hN> • N is a number from 1 to 6 identifying the heading size. Here are some examples of different heading sizes: CENG 449 Lecture 1

Most commonly used tags • <html>Content Here</html> Text placed between the angled brackets describes the Web page Opening tag is very first displayed in the markup after DOCTYPE Closing tag is the very last displayed in the markup • <title>Content Here</title> Text placed between the angled brackets describes the title of the Web page • <body>Content Here</body> Text placed between the angled brackets describes the visible page content • <h1>Content Here</h1> Text placed between the angled brackets displays as a heading h1 (largest heading), h2, h3, h4, h5, h6 (smallest heading) • Content Here Text placed between the angled brackets displays as a paragraph • Content Here Italics • Content Here Bold • Content Here Describes the font you’re using • <q>Content Here</q> Displays quotation marks around content • Adds a space • Adds a line break Empty/Self-Closing tag —space before the slash mark makes it compatible with older browsers • <hr /> Adds a horizontal line CENG 449 Lecture 1

• <img /> Adds an image to your page • <a>Content Here</a> Displays a hyperlink • <ol>Content Here</ol> Displays an ordered list Uses numbers for list items • <ul>Content Here</ul> Displays an unordered list Uses bullets for list items • <li>Content Here</li> Used in an unordered or ordered list to separate the items in a list <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> • <center>Content Here</center> Centers content on a page CENG 449 Lecture 1

Nested Tags (X)HTML can be nested • (X)HTML elements can be nested inside of each other <h1>Content Here</h1> • When nesting elements, the first tag opened, must be the last tag closed •GOOD <h1>Content Here</h1> •BAD <h1>Content Here</h1> CENG 449 Lecture 1

Example CENG 449 Lecture 1

Example <html> <head> <title>Headings</title> </head> <body> <h1>This is a Main Heading</h1> <h2>This is a Level 2 Heading</h2> <h3>This is a Level 3 Heading</h3> <h4>This is a Level 4 Heading</h4> <h5>This is a Level 5 Heading</h5> <h6>This is a Level 6 Heading</h6> </body> </html> CENG 449 Lecture 1

Paragraphs: • To create a paragraph, surround the words that make up the paragraph with an opening tag and closing tag. • By default, a browser will show each paragraph on a new line with some space between it and any subsequent paragraphs. CENG 449 Lecture 1

Example <html><head><title>Paragraphs</title></head> <body> A paragraph consists of one or more sentences that form a self-contained unit of discourse. The start of a paragraph is indicated by a new line. Text is easier to understand when it is split up into units of text. For example, a book may have chapters. Chapters can have subheadings. Under each heading there will be one or more paragraphs. </body></html> CENG 449 Lecture 1

Bold & Italic Tags: By enclosing words in the tags and we can make characters appear bold. <html><head><title>Bold</title></head><body>This is how we make a word appear bold.Inside a product description you might see some key features in bold.</body></html> CENG 449 Lecture 1

By enclosing words in the tags and we can make characters appear italic <html><head><title>Italic</title></head><body> This is how we make a word appear italic. It's a potato Solanum teberosum. Captain Cook sailed to Australia on the Endeavour. </body></html> CENG 449 Lecture 1

Superscript & Subscript: The element is used to contain characters that should be superscript such as the suffixes of dates or mathematical concepts like raising a number to a power such as 22. The element is used to contain characters that should be subscript. It is commonly used with foot notes or chemical formulas such as H20. <html><head><title>Superscript and Subscript</title></head><body>On the 4th of September you will learn about E=MC2. The amount of CO2 in the atmosphere grew by 2ppm in 20091. </body></html> CENG 449 Lecture 1

CENG 449 Lecture 1

Line Breaks & Horizontal Rules • The browser will automatically show each new paragraph or heading on a new line. But if you wanted to add a line break inside the middle of a paragraph you can use the line break tag . <html><head><title>Line Breaks</title></head><body>The Earth gets one hundred tons heavier every day due to falling space dust.</body></html> CENG 449 Lecture 1

<hr /> To create a break between themes — such as a change of topic in a book or a new scene in a play — you can add a horizontal rule between sections using the <hr /> tag. <html><head><title>Horizontal Rules</title></head><body>Venus is the only planet that rotates clockwise.<hr />Jupiter is bigger than all the other planets combined.</body></html> CENG 449 Lecture 1

<html><head><title>Horizontal Rules</title></head><body>Venus is the only planet that rotates clockwise.<hr /><hr /><hr />Jupiter is bigger than all the other planets combined.<hr /> </body></html> CENG 449 Lecture 1

 The use of the element indicates that its content has strong importance. <html><head><title>Strong</title></head><body>Beware: Pickpockets operate in this area. This toy has many small pieces and is not suitable for children under five years old.</body></html> CENG 449 Lecture 1

 The element indicates emphasis that subtly changes the meaning of a sentence. By default browsers will show the contents of an element in italic. <html><head><title>Emphasis</title></head><body>I think Ivy was the first.I think Ivy was the first.I think Ivy was the first.</body></html> CENG 449 Lecture 1

<q> The <q> element is used for shorter quotes that sit within a paragraph <html><head><title>Quotations</title></head><body> Did you ever stop to think, and forget to start again? As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem. </q> </body></html> CENG 449 Lecture 1

<ins>, <del> The <ins> element can be used to show content that has been inserted into a document, while the <del> element can show text that has been deleted from it. <html><head><title>Insert and Delete</title></head><body>It was the <del>worst</del> <ins>best</ins> idea she had ever had. </body></html> CENG 449 Lecture 1

<s> Strikethrough indicates something that is no longer accurate or relevant (but that should not be deleted). <html><head><title>Strikethrough</title></head><body>Laptop computer:<s>Was $995</s>Now only $375</body></html> CENG 449 Lecture 1

<blockquote> The <blockquote> element is used for longer quotes that take up an entire paragraph. <html><head><title>Quotations</title></head><body> <blockquote> Did you ever stop to think, and forget to start again? Did you ever stop to think, and forget to start again? Did you ever stop to think, and forget to start again? Did you ever stop to think, and forget to start again? </blockquote> As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem.</q> </body></html> CENG 449 Lecture 1

Lists:1.Ordered Lists: • <ol> The ordered list is created with the <ol> element. • <li> Each item in the list is placed between an opening <li> tag and a closing </li> tag. (The li stands for list item.) CENG 449 Lecture 1

<html><head><title>Ordered Lists</title></head><body><ol><li>Chop potatoes into quarters</li><li>Simmer in salted water for 15-20 minutes until tender</li><li>Heat milk, butter and nutmeg</li><li>Drain potatoes and mash</li><li>Mix in the milk mixture</li></ol></body></html> CENG 449 Lecture 1

Ordered lists with type attribute <!DOCTYPE html><html lang="en"> <head><title>Ordered Lists</title> </head> <body> <oltype="I"> <lh>List Header</lh> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li></ol> </body><html> CENG 449 Lecture 1

For he ordered lists: • type="1" The list items will be numbered with numbers (default) • type="A" The list items will be numbered with uppercase letters • type="a" The list items will be numbered with lowercase letters • type="I" The list items will be numbered with uppercase roman numbers • type="i" The list items will be numbered with lowercase roman numbers CENG 449 Lecture 1

Unordered Lists: The unordered list is created with the <ul> element. Each item in the list is placed between an opening <li> tag and a closing </li> tag. <html><head><title>Unordered Lists</title></head><body><ul><li>1kg King Edward potatoes</li><li>100ml milk</li><li>50g salted butter</li><li>Freshly grated nutmeg</li><li>Salt and pepper to taste</li></ul></body></html> CENG 449 Lecture 1

Unordered List type Attribute • You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. Following are the possible options: • <ul type="square"> • <ul type="disc"> • <ul type="circle"> CENG 449 Lecture 1

<!DOCTYPE html> <html> <head> <title>HTML Unordered List</title> </head> <body> <ul type="circle"> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </body> </html> CENG 449 Lecture 1

HTML Attributes • An attribute is used to define the characteristics of an HTML element (tag) and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value: • …… CENG 449 Lecture 1

<!DOCTYPE html><html><head><title>Align Attribute Example</title></head><body>This is left alignedThis is center alignedThis is right aligned</body></html> CENG 449 Lecture 1

Reading Assignment:Read the information on the following web pagehttp://www.tutorialspoint.com/html/html_attributes.htm <!DOCTYPE html> <html> <head> <title>Setting Font Size</title> </head> <body> Font size="1" Font size="2" Font size="3" Font size="4" Font size="5" Font size="6" Font size="7" </body> </html> CENG 449 Lecture 1

HTML Definition Lists: • HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list. • Definition List makes use of following three tags. <dl> - Defines the start of the list <dt> - A term <dd> - Term definition </dl> - Defines the end of the list CENG 449 Lecture 1

<!DOCTYPE html> <html> <head> <title>HTML Definition List</title> </head> <body> <dl> <dt>HTML</dt> <dd>This stands for Hyper Text Markup Language</dd> <dt>HTTP</dt> <dd>This stands for Hyper Text Transfer Protocol</dd> </dl> </body> </html> CENG 449 Lecture 1

Nested Lists: <html> <head> <title>Nested Lists</title> </head> <body> <ul> <li>Mousses</li> <li>Pastries <ul> <li>Croissant</li> <li>Mille-feuille</li> <li>Palmier</li> <li>Profiterole</li> </ul> </li> <li>Tarts</li> </ul> </body></html> CENG 449 Lecture 1

<html> • <head> • <title>Lists</title> • </head> • <body> • <h1>Scrambled Eggs</h1> • Eggs are one of my favourite foods. Here is a • recipe for deliciously rich scrambled eggs. • <h2>Ingredients</h2> • <ul> • <li>2 eggs</li> • <li>1tbs butter</li> • <li>2tbs cream</li> • </ul> • <h2>Method</h2> • <ol> • <li>Melt butter in a frying pan over a medium • Heat • </li> • <li>Gently mix the eggs and cream in a bowl</li> • <li>Once butter has melted add cream and eggs</li> • <li>Using a spatula fold the eggs from the edge of • the pan to the center every 20 seconds (as if • you are making an omelette) • </li> • <li>When the eggs are still moist remove from the • heat (it will continue to cook on the plate • until served) • </li> • </ol> • </body> • </html> CENG 449 Lecture 1

The basic structure of any HTML

The basic structure of any HTML

Presentation Transcript

Basic HTML Workshop

The basic HTML

Basic HTML

Basic Structure of the Earth

Basic Tags of HTML

Basic HTML

Basic HTML Workshop

Basic HTML

Basic HTML

Basic HTML

Basic HTML Workshop

Basic HTML

Basic HTML

BASIC HTML

Basic HTML Tags

Introduction to HTML Basic Structure of a HTML page Text formatting tags in HTML Lists in HTML

BASIC HTML

HTML basic setup

HTML Structure

Basic HTML

Basic tutorial html