100 likes | 187 Views
HTML Structures. Lesson 2. Elements. The fundamental components of the structure of a text document. Examples of elements are heads, tables, paragraphs and lists. Tags. Refers to the various elements in an HTML document.
E N D
HTML Structures Lesson 2
Elements • The fundamental components of the structure of a text document. • Examples of elements are heads, tables, paragraphs and lists. Tags • Refers to the various elements in an HTML document. • HTML tags consist of a left angle bracket < a tag name and a right angle >.
Tags • Are usually paired <html< </html> to start and end the tag instruction. • The end tag looks like the start tag except for the slash / that precedes the text inside the brackets. • Tags without pairs are called empty tags.
Basic HTML tags • <html> - tag that creates the html document closed with </html> tag. • <head> - the tag sets off info that is not displayed on web page itself, closed with </head> tag. • <title> - tag within the <head> tag creates the name of the document in the title bar, closed with </title> tag. • <body> - tag that sets off the visible portion of the document, contains all readable text in your web page closed with the </body> tag. • <!comments> - tag that allows the author to write comments which will not be displayed on the web page.
Formatting Tags • Text tags are one of the simplest tags that you will be using in HTML. • It is made up of several related tags that change the appearance of your text. • The way you manipulate your text tags may be compared to how you will format a MS word document.
<pre> - a tag that creates preformatted text, meaning all text written between this tag will appear exactly as you type them in a code closed </pre> tag. • <b> - gives bold format to text with closed </b> tag. • <i> - gives italic format t text with closed </i> tag. • <tt> - give teletype format to text with closed </tt> tag • <em> - gives emphasize text in italic with closed </em> tag • <sub> - gives subscript effect with closed </sub> tag • <sup> - gives superscript effect with closed </sup> tag
Paragraph tags <p> </p> • <p> - creates a new paragraph with closed </p> tag. • Attributes of <p> tag • <p align = “position”> – aligns the paragraph according to the position you set – left, center, or right • <br> - to break a line • <blockquote> - indents your paragraphs from both sides the size of the indention depends on the default setting on your computer usually .5 inch
Heading <h_></h_> • Heading tags are used to differentiate certain sections of html document from other sections. • As their name implies, they create an impression of using headlines in your html document. • They are often used in html documents that are following a particular hierarchy in presenting the information they contain. • <h?> - the ? Represents any number from 1 t 6 with closed </h?> tag.
Working with HTML List • An ordered list is also called a numbered list and is used to create a sequential list of items or steps, similar to numbered lists done in MS word document. It will appear sequentially numbered such as 1,2,3… • An unordered list is also known as a bulleted list, commonly used to create a list of items that are to be taken in a particular order, they use bullets and have no specific structure or relationships among the data
<ol> - is used for ordered list Attributes. • <ol type = “A, a, I, i, 1”> - where A is the sampled format of list. • <li> - list items • <ul> - is used for unordered list Attributes. • <ul type = “disc, circle, square”> - where disc is the sample shape of the list. • <li> - list items.