HTML Tags

2,755 views 14 slides Jun 16, 2017
Slide 1
Slide 1 of 14
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14

About This Presentation

Feel free to leave some comments. Thank you!


Slide Content

Column X Column Y _____1. Site Map _____2. Telnet _____3. Gopher _____4. Internet Protocol _____5. FTP _____6. Internet _____7. URL _____8. Web Browser _____9. Survey _____10. Typeface It is a formatted text string used by web browsers to access a site . It is a software which allows user to access and display the information or HTML files on the WWW. It is an early text based to access documents in internet. It is a visual or textually organized model of a website’s content. It is the process of collecting data used to gather information about certain issues or topics. This is the set of rules that allow for inter-machine communication on the Internet. It is a set of characters of the same design. It allows for the transfer of files between a server and a computer. It is a remote login application that permits to access other computer as if you were actually there. It is a network of computers linked together around the world. It is a system of linked documents together and uses HTML.

Identification : What do the following internet protocols stand for? Write your answer in the space provided. 11. SMTP - __________________________________ 12. HTTP - __________________________________ 13 ._________ 14. Directory 15. _______________ http ://www. digitalcitizenship.net / index / registration-form.html http ://www. digitalcitizenship.net / index / registration-form.htm

<HTML> TAG Information Communication Technology - 8

Objectives Define HTML5 tags; Describe the new semantic tags in HTML5; and Create a semantic layout in HTML5.

Defining HTML Tags Tags are markers in HTML documents. It indicates special types of coding that are used to specify documents titles , itemized lists, create tables, format text etc. Tags are always enclosed with a less than “<“ symbol and a greater than “>” symbol. There are two basic type of tags: Paired Tags – This tag has a companion, the first tag is referred to as Opening tag and the second it referred as Closing tag . Ex. This text is in <b> BOLD </b> letter.

Unpaired Tags – Is also known as Stand Alone tag. It doesn’t need a closing tag. Some of these tags only provide information about your HTML document and doesn’t affect the content or how they are displayed. Tags Description < br > This tag will give you a line break. This means that the text will move and start on the next line. < hr > This tag will draw a horizontal line across your page. “ hr ” means horizontal references. <meta> This tag is used to store information usually relevant to browsers and search engines. <area> This tag is used for defining an area in an image map.

Basic Paired Tags Structural Tags These are mandatory and placed at the beginning and end of an HTML file. Tags Description <html> </html> For an HTML document <head> </head> For the head section <title> </title> For the web page title <body> </body> For the body section Example: <title> My First Web Page </title>

Headings These tags are six levels of headings Tags Description <h1> </h1> Defines the most important heading (largest font size) <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> Defines the least important heading (smallest font size) Example: <h1> This is my Personal page </h1>

Formatting Tags These tags affect the appearance or the style of the words or sentences. Tags Description < em > </ em > It is used to emphasize text and appears in italic text <strong> </strong> It is used for emphasis and usually appears in bold text < center > </ center > It is used to place the text in the middle of page. Example : < center > This is aligned at the center of the page </ center >

Separator/ Container tags These tags separate words and sentences on a page. Tags Description <p> </p> This defines the block of text as a paragraph < br > </ br > This tag gives you a line break < hr > </ hr > This draws a horizontal line in your page <div> </div> This is used to separate the document into sections Example:

Attributes An attribute is used to define the characteristics of an element and is placed inside the element’s opening tag. Its being added within the a tag to extend and modify its actions. Tags can have multiple values with a double quotation sign “values”, which follows an equal sign = after the attribute’s name. Ex: This text uses a <font face=“Jokerman”> Jokerman</font> font face. Attribute/Name Value

Attributes All attributes are made up of two parts: a  name  and a  value : The  name  is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is  align , which you can use to indicate the alignment of paragraph on the page. The  value  is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute:  left, center  and  right .

Semantic Tags in HTML5 There are semantic ways of writing codes in your web pages. Semantics means the relationship of meanings of sign or set of signs. You use HTML to reinforce structural meaning. HTML adds semantic tags to define layouts in more intuitive ways. The name of the tag reflects the purpose or part on the website. Tags Description <header> Contains introduction or group of navigation elements. <footer> Defines the text on the bottom of the page, such as copy right or contact information. <article> Contains independent item content, such as magazine article or forum post. <aside> Defines a block of text that is tangential to the main discussion such as note, warning or tips. <section> Defines Generic content or an application section. Ex. Book chapters, a site home page, News, contacts. < nav > Contains the navigation links. <details> Contains additional details that user can view or hide using an interactive widget. < hgroup > The sections of headings using <h1> to <h6> , which start from the largest to the smallest.