HTML - Lesson
advertisement
Intro to HTML Steps To Understanding Basic HTML Code HTML • HTML is short for Hyper-Text Markup Language. That’s gibberish for ‘something that makes plain text look good’. It’s the ‘code’ that’s behind every webpage. And, surprisingly, it’s actually quite simple. • The teachings of basic HTML code can (almost) be broken down in two all-ruling disciplines: style aka manipulating the appearance, and referring, aka marking and pointing to locations of, and within documents. HTML can’t do anything more complicated than drawing a table, or creating frames, and we’re not going to cut into PHP or Java. • My goal today is to give you some of the HTML building blocks. You won’t be a programmer just yet, but you’ll be able to skim the source of a webpage and hopefully, understand it. Step One – The Concept Of Tags • As said previously, basic HTML code manipulates a plain text document to apply style and reference. It does so by applying ‘tags’. A tag does nothing more than indicating a position or selection of the document, and specifying the kind of wizardry that needs to be done. Tags • <tag-example-1>This, and only this part of the document is affected.</tag-example-1> • <tag-example-2>Something just happened, preceding this part of the document • Example 1 shows a sentence that’s encapsulated by two tags, a begin- and end tag. Everything in between is affected. Very common examples are making text bold, italic, or creating a link. The end tag is identical to the begin tag, but is preceded in angle brackets by a forward slash ( / ). Tags • Example 2 shows a tag that works alone and (arguably) doesn’t need to be closed. Although not required, it’s occasionally also written as <tag /> to emphasize this very attribute. Loner tags don’t affect ‘part’ of the document, but signify local wizardry, things that happen ‘in between’. Common examples are line breaks and paragraph breaks. • Note: for loner tags, <tag>, <tag />, and <tag></tag> all mean the same thing. Tags • <tag attribute=”value” attribute2=”value2″>This, and only this part of the document is affected.</tag> • Sometimes tags allow for additional attributes to be supplied. Common examples are text font and color, or image width, height and source. In those cases, the tag name is followed by a space, and a number of attribute with a value, again separated by spaces. The value is the variable part of this formula. Note that the end tag remains the same, regardless of the attributes. Step Two – The Parceling of HTML, HEAD & BODY • The HTML, HEAD and BODY tags are to an HTML document what a bedroom, kitchen and living room are to a house. These encapsulating tags parcel out the big parts of a document. The Parceling of HTML, HEAD & BODY • <HTML></HTML> simply indicates the use of HTML code. They’ll show in every webpage, usually at start and end, and embrace practically all the other code, including the next two. • <HEAD></HEAD> mark the ‘administrative building’. These will encapsule the title, and enable certain scripts. Usually at the very head (no pun intended) of the document, this is where you don’t need to be. • <BODY></BODY> is located below the HEAD tags, and makes up most of the document. This part tells the tale of what’s actually showing on your webpage. Living here are the text, images, links, and pretty much anything you can see in your browser. This is where we play. The following tags all occur within the BODY part of an HTML document. The Parceling of HTML, HEAD & BODY Step Three – Because <P>, <BR> & <FONT> Make You Feel Pretty • We’ve already said HTML was a markup language. This means as much as making text feel pretty. Remember, HTML dates back to when the web was a very text-y experience. Besides, the internet would’ve been far too slow to support YouTube. Here are some of the most common pretty-making tags. • <b></b> makes your text look bold • <i></i> makes you write in italic • <u></u> underlines what you just wrote <P>, <BR> & <FONT> • <br> hits the break, making you continue on a new line • <p> indicates a paragraph, creating an extra large break • These allow you to structure the document, because an actual break doesn’t mean anything in an HTML document. <P>, <BR> & <FONT> • <FONT></FONT> allows you to manipulate a bunch of other stuff with text, by using attributes like size, face and color. • An ideal example would be <FONT color=”blue”>smurfs</FONT>. <P>, <BR> & <FONT> <P>, <BR> & <FONT> • <H1></H1> to <H6></H6> allow you to quickly draw up different sized headers. H1 is biggest and H7 smallest. • Nowadays, markup is often kept in a separate CSS file. The exact style figures are explained externally, and one only needs to ‘mark’ part of the document to apply them. This is done by using div tags. For example, <div class=”headermakeuseof”>sometext</div> will look for a headermakeuseof class in the CSS file. We won’t discuss CSS in detail here. sample HTML document • Here is the structure of a sample HTML document: • • • • • • • • • • • • • • • <html> <head> <title>Title goes here</title> </head> <body> <center> <p> <font size=+2>Welcome to my page</font> </p> <p> The p is a paragraph tag, which tells the browser that this is all one paragraph. </p> </center> </body> </html> Step Four – Embedded Images with <IMG> • Images have become customary on HTML pages, and yet there’s a piece of code behind it. The <IMG> is one of two tags we’re going to discuss in detail, because it’s something you’ll be able to use. Embedded Images with <IMG> • Here are some of the attributes used in conjunction with the IMG tab. • src=”http://site.com/image.jpg/” • Very important. The source attribute specifies the location of a picture. That’s right, a picture is never really rendered in a web page, but gets pulled in from an external source. Once you’ve got that address, you’ve got the picture. Embedded Images with <IMG> • Sometimes, only part of the URL is displayed. The actual URL will depend on the location of the HTML file. This is called a relative address, contrasting with an absolute address. An exemplary http://site.com/dir1/dir2/dir3/page.html may show a value of “image.jpg” when the picture is located in the same directory as the webpage. In this example, the full address would be http://site.com/dir1/dir2/dir3/image.jpg. • If you encounter a relative address of “dir4/image.jpg”, the image will be located in http://site.com/dir1/dir2/dir3/dir4/image.jpg Embedded Images with <IMG> • Similarly, “../image.jpg” will have you go back one directory, “../../image.jpg” two directories, and so on. • height=”200″ width=”50%” • These tags define how large the image is displayed. It doesn’t say anything about the actual size of the image. Sizes can be added in pixels (where 200 and 200px are one and the same) or percent. With only height or width specified, the other one changes accordingly. Using both tags allows you to ‘stretch’. Embedded Images with <IMG> • alt=”alternative name or comment” • The alt tag specifies the text shown on mouse-over, or when an image fails to load. • Proper usage would be, e.g. <IMG src=”image.jpg” height=”20px” alt=”example”> Step Five – Links Are Made With A Tag • This one could be even more important than the IMG tag. An <a></a> tag allows you to mark a spot in a document, and link to documents, pictures, files, and even anchors in other HTML sites. Here are the most common attributes. Links Are Made With A Tag • href=”http://www.makeuseof.com” • One of the most common attribute, written <a href=”address”>text</a>. You can create links by defining the web address and encapsulating said ‘anchor text’. • name=”neverwhere” • Used in conjunction with the name attribute, the tag will create an anchor. You can use this anchor to link back to from within the same page, or even over the web. One can link to an anchor by using a relative or absolute URL, respectively <a href=”#name”> or <a href=”http://site.com/page.html#name”>. In Conclusion • This is the part where I admit we’ve only brushed the surface of basic HTML code. What we’ve seen today will allow you to skim through and understand a big part of simple websites. Go ahead, try it. You’ll definitely find some tags you don’t know, but that’s part of learning. Glossary • • • • • • • • • • • • • • • • <html> </html> Standard opening and closing tags for any HTML page. Enclose everything else in these. Container tag. <!... …!> A comment — whatever you put here will be skipped over by the browser. <head> </head> Starts the header part of your document. Everything between these is mainly used to help your browser and search engines classify your page. Using this is optional, but recommended. Container tag. <title> </title> Whatever is between these tags will appear in the blue bar at the top of the screen. <meta> A group of tags that give page and creator information specifically to the search engines. <base> Changes the default link target or relative link URL, useful if the page is read on another server. <link> Allows you to associate stylesheets and a favorites icons to your page. <body> </body> Everything visible on your page goes between these tags. Everything. Container tag. Glossary • • • • • • • • • • • • • • • • Links <a> </a> Makes the enclosed text or image a hyperlink to another file. Lists <ol>...</ol> Creates an ordered list, where each item is numbered in order. Container Tag. <ul>...</ul> Creates an unordered list, with each item bulleted. Container Tag. <li> Each list item begins with an li, and they are all placed in either an ol or ul. <dl>...</dl> Creates a definition list. <dt> Creates a definition term. <dd> Creates a definition, which appears below its parent term and indented from the left. Glossary • • • • • • • • • Multimedia <img> Places an image on your page <embed> Adds a multimedia element directly into your page, allowing your browser to play it with a plug-in. <script>...</script> Adds a script, usually a JavaScript into your page. <noscript>...</noscript> Enclose anything you want displayed by browsers that do not support scripts. Checking the source You can view the html code of a website by going to the page tab on the browsers control panel and scrolling down to page source. Checking the source This will allow you to see the source code for the website.
