Understanding HTML Code A Presentation by: Ammar Bandukwala
General Terms HTML - A markup language used to structure text and multimedia documents and to set up hypertext links between documents, used extensively on the World Wide Web. WWW (World Wide Web) - computer network consisting of a collection of internet sites that offer text and graphics and sound and animation resources through the hypertext transfer protocol. HTTP (Hypertext Transfer Protocol) - a protocol (utilizing TCP) to transfer hypertext requests and information between servers and browsers. URL (Uniform Resource Locator or Universal Resource Locator) - Internet address (for example, http://www.intel.com/trade/), usually consisting of the access protocol (http), the domain name (www.intel.com), and optionally the path to a file or resource residing on that server (trade).
Browser Basics Title Bar Address Bar Domain and Encryption Status Bar
HTML Code Rules HTML Tags are not case sensitive Before you begin coding you must understand these general rules while coding. HTML Tags are not case sensitive Filenames and Extensions are case sensitive When writing tags there is starting and ending for example: <tag> “start” [] </tag> “end” The end of tag usually terminate with the “/” and the corresponding tag.
HTML Code: (Basic Tags) <HTML>…</HTML> - This tag signals the point where text should start being interpreted as HTML code. The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag. <HEAD>…</HEAD> - Code to execute before <body>. <TITLE>…</TITLE> - A title tag allows you to specify a Document Title in your browser window which display in the top bar of the browser and the name displayed when a user bookmarks your page. </BODY>…</BODY> - The bulk of your document which contains your text, images, and links will be in the body of the document.
HTML Code: (Body Tags) <P> … </P> - Define an area as a paragraph meaning it will be indented and formatted. Text and images or various other objects maybe inserted within this tag (it is good form to format most text in a <p> tag). <H1> … </H1> (H1-H6) – There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold. <B> … </B> - A text formatting tag which bolds the text encompassed within it. <I> … </I> - A text formatting tag which italicize the text encompassed within it.
HTML Code: (Body Tags) <!-- … --> - This is a comment tag to help the programmer read the code more easily by placing descriptions. This code is not displayed in a browser window and only visible in the source code. <BR> - A break tag moves the cursor to the next line essentially creating a break or blank line in the document. <HR> - A horizontal ruler tag that creates a visual line to break a page into sections. <CENTER> … </CENTER> - Horizontal Center alignment of an image or text object. <IMG src=“filename”> - The image tag being one of very few tags in this lesson which have NO ending tag. <A> … </A> - A hyperlink tag which format text into a clickable object which directs the end-user to another site or different area of the page.
HTML Code: (Attributes) All tags define an object, but what if you want to manipulate the object? This is where attributes come into play. Each tag has its own specific set of attributes, in this presentation we will go over the important one’s that are used frequently.
HTML Code: (Attributes) The <body> tag has ‘background’ an attribute which can be defined as a reference to an image. (Note: By default all images are tiled in a background, it is generally not a good idea to use a image as background). Example of Code: <body background=“bg.jpg”> The <body> tag also has a ‘bgcolor’ attribute which is a 6 digit hexadecimal color code with a # prefix. <body bgcolor=“#000000”> *The color code for black is 000000 while the color code for white is FFFFFF. All ranges of colors have different codes, play around with it or search the web for tables with all the colors and there values.
HTML Code: (Attributes) How do I change the color and size of my font? If you want to change the color of one word or paragraph, you would do it like this: <p><font color="#25AD3D">Your text goes here</font></p> To change the font size of one word or paragraph, you would do it like this: <font face="arial" color="#000000" size="3">Your paragraph goes here</font> You can make the size any number you want. The higher the number, the bigger the font. You can also change the six digit hex code to the color of your choice. For example instead of color=“#000000” it is color=“black”.
HTML Code: (Attributes) How do I change the color of my text links? You can change link color, active link (alink) color and visited link (vlink) color. You just add this tag after the </head> tag, and substitute your own color code where you see bold text. <body bgcolor="#000000" text="#000000" link="#000000" vlink="#000000" alink="#000000"> How do add an "alt" tag to my text links? This is a really simple, neat little trick that adds a description of your link when you put your mouse over it (this doesn't work with all browsers). This is created by inserting the ‘title’ attribute demonstrated below. This is what a link with this tag added would look like: <a href="http://your url" title="your description">your link text here</a>
HTML Code: (Attributes) The <img> tag can format an image onto your web page, but what if the pictures are to big or to small? The attributes ‘height’ and ‘width’ will help alleviate this problem. The height and width are defined in the measurement of a pixel. To understand this better a standard screen size is 1024x768 pixel on many computers and if you define an image with the width and height of say 2000x1400 pixels it will be close to double the resolution of your screen. So please keep image size’s relative to your site and resolution you work with.. Example of Code: <img src=“blah.jpg” width=“400” height=“400”> Please also note attributes such as ‘width’ and ‘height’ can be used in other operator tags for example <body>, <table>, <HR> etc.. to define their size also.
HTML Code: (Lists) How do I make numbered (ordered) lists? <OL> <LI>HTML <LI>CSS <LI>Frames <LI>Tables </OL> It will look like this: 1. HTML 2. CSS 3. Frames 4. Tables
HTML Code: (Lists) How do I make bulleted (unordered) lists? <UL> <LI>HTML <LI>CSS <LI>Frames <LI>Tables </UL> It will look like this: HTML CSS Frames Tables
HTML Code: (How to Start) Open a basic text editor. (In this presentation will be in reference to “Microsoft Windows Notepad” a program that comes with Microsoft based operating systems. Click Start->Run Type: “Notepad.exe” or “Notepad” (No Quotes) Click in Menu Bar -> Format -> Word Wrap
HTML Code: (Basic Structure) To begin coding in HTML document it must have the following basic structure or format. The following code shows a browser that this file is a web page.
HTML Code: (Nesting Tags) HTML tags are relatively easy and straight forward in use in a simple web page, but what if you would like to add a little bit of complexity. This is where tag nesting comes into play. Tag nesting is using multiple tags to format or define an object on the page. For example a part of my site has a paragraph but I want to italicize all the text and just bold the first word. This is how the code would look. <p><b>Greetings!</b><i> Welcome to HTML Coding Presentation, this is a paragraph with nested tags! </i></p>
HTML Code: (Insert a Image) To insert an image into your web page you must place an <IMG> tag with the attribute ‘src’ which points to the location of your image. If your image is in the same folder as your web page document then just insert the (filename.extension) within the quotes. Output: Image Tag
HTML Code: (Insert a Link) If you with to make an object such as text or an image linkable you must use the <A> … </A> tag which defines it as a hyperlink. The attribute ‘href’ gives the link its direction or pointer to another page or area usually in URL format. Finally area between the <A> tags is what is displayed on the web site as a hyperlink. Output: Hyperlink Tag
HTML Code: (Insert Email Link) How do I add an e-mail link? This is called a "mailto" and this is how you do it (substitute your own info where you see bold text): <a href="mailto:your address">your name</a> If you want to have a subject entered in the subject line automatically, you would add this code to your editor: <a href="mailto:your e-mail address? subject=your subject">E-mail me</a>
HTML Code: (Tables) The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. The following tags are used in a table: <table> … </table> - Define Table <tr> … </tr> - Table Row </td> … </td> - Table Cell Attributes for the <table> tag: ‘border=0’ – Defines the size of border in the table where 0 being no border to however thick you want it. As the number increases so does the thickness of the border as its measured by pixels. Attributes for <tr> and <td> and <table> tags: ‘align=center’ – Define horizontal alignment of all object within the cell which can be left, center, and right. ‘height=20’ – Define height of cell or row. ‘width=20’ – Define width of cell or row.
HTML Code: (Tables) Please note the number columns is determined by how many cells or <td></td> are contained within a row or <tr></tr> tags. In the example below will show you a 2x2 table with code first then output. Cell Tags Row Tags