Basic HTML Vocabulary Rules

Size: px

Start display at page:

Download "Basic HTML Vocabulary Rules"

Corey Logan
9 years ago
Views:

1 Basic HTML Vcabulary Rules Belw yu will find an essential list f HTML tags and attributes and their meanings. HTML: An acrnym fr Hypertext Markup Language HTML Element: An HTML element is an individual cmpnent f an HTML dcument. HTML dcuments are cmpsed f a tree f HTML elements. These elements are called tags and attributes HTML Tag: A cde t identify the different parts f an HTML dcument s that a web brwser will knw hw t display what it cntains t a site visitr. Fr example, paragraphs in an HTML dcument are marked with a p tag t identify them as paragraphs. Tags are always cntained inside f a set f tag brackets - <p> is the way a p tag is marked. <p> dentes what is called an pening p tag which wuld begin a paragraph. Tags must always be clsed after being pened. A clsing tag is exactly the same as the pening tag with the exceptin f a / symbl. A clsing p tag is written </p>. <p>this is an example f text inside f a p tag </p> There are tw basic types f tags in HTML. Semantic tags and Structural tags Semantic tags give meaning t the cntent they enclse. Fr example cntent in a <p> tag is a paragraph f text. The tag identifies the type f cntent it cntains. Structural tags prvide rganizatin t HTML dcument. Fr example a <div> is a lgical divisin f cntent. HTML tags are either blck level elements r inline level elements Blck level elements always have a line break after the clsing tag. Fr example the cde: <p>this is an example f text inside f a p tag </p> <p>this is an example f text inside f a p tag </p> There wuld be a line break t begin a new line after each clsing <p> because <p> tags are blck level elements Inline level elements are placed next t each ther they d nt have a line break after each clsing tag. Fr example the span tag is an inline level element: <span>this is an example f text inside f a p tag </span> <span>this is an example f text inside f a p tag </span> The text wuld be displayed next t each ther n the same line. Blck level elements can cntain ther tags and elements. Fr example in the list: <ul> <li>timthy</li> <li>jhn</li> <li>peter</li> </ul> The <ul> tag is a blck level element. Therefre it can cntain <li> tags. Inline level elements cannt cntain ther tags. Remember HTML des nt care abut line breaks, tabs r spaces. It ignres them

These elements are called tags and attributes HTML Tag: A cde t identify the different parts f an HTML dcument s that a web brwser will knw hw t display what it cntains t a site visitr.

2 HTML Attribute: An HTML attribute is a prperty r characteristic f an HTML tag. It prvides a brwser with mre infrmatin abut the tag s that it can be displayed crrectly r referenced. Fr example the HTML <img> tag must have a src (surce) attribute t tell the brwser the lcatin f the image it is suppsed t display. <img src= images/graphic.jpg /> is an example f an image tag with the surce attribute pinting t the lcatin f the image. Mst f the time yu will pen and clse tags by entering the pen tag, then adding the cntent, then clsing the tag. An example is: <p>this is an example f text inside f a p tag</p> Fr a few tags yu will pen and clse them n the same line such as the image tag. This is used when a tag cntains n cntent, just attributes r the tag by itself. When this is the case their will be a space and then a /> clsing the tag: <img src= images/graphic.jpg /> <br /> is an example f a line break that pens and clses in the same element. HTML is nt case sensitive but is usually written in lwer case. HTML des nt recgnize empty r white space. S yu can use tabs and line breaks t make yur cde readable. Fr example the cde: <p>this is a paragraph</p> and <p>this is a paragraph</p> wuld bth display This is a paragraph. Brwsers will ignre the empty space. In the space way extra lines and tabs are ignred and can be used t make yur cde mre readable.

jpg /> is an example f an image tag with the surce attribute pinting t the lcatin f the image.

5 Example f HTML tags and elements. Tags are in Black, Attributes are in Green, Cntent is in Orange <html> <head> <title>untitled Dcument</title> <link href= styles.css rel= stylesheet type= text/css media= screen > </head> <bdy> <div id= heading > <h1>sample Heading</h1> <p class= class_name >This is a paragraph</p> </div> <div id= cntent > <ul> <li>sample unrdered list item</li> <li>anther Sample unrdered list item</li> </ul> <l> <li>sample rdered list item</li> <li>anther sample rdered list item</li> </l> <a href="sample.html" target= _blank >Sample Link</a> <img src="graphics/2.jpg" alt= Sample text descriptin /> <p>the quick <strng>brwn</strng> fx jumped <em>ver</em> the dg.</p> </div> <table> <th>table Header</th> <th>table Header</th> <td>jhn</td> <td>10</td> <td>mary</td> <td>20</td> </table> </bdy> </html>

unrdered list item</li> <li>anther Sample unrdered list item</li> </ul> <l> <li>sample rdered list item</li> <li>anther sample rdered list item</li> </l> <a href="sample.

CSS Vocabulary and Grammar Basics

CSS Vocabulary and Grammar Basics CSS Vcabulary and Grammar Basics CSS Stands fr Cascading Style Sheet CSS is a language system that allws yu t define the presentatin f elements in HTML The Presentatin f HTML elements has tw aspects t