What is it?
Why should I learn it?
Knowing a little HTML can go a long way. Even if you aren't going to be coding websites by hand, you might need to tweak something in a content management system, like Wordpress, or resolve a simple coding issue in a project site you are managing. Plus, if you are going to learn programming, this is a good place to start.
What can I do with it?
You can start to make Web pages with HTML. You will learn the basic elements and their associated attributes. But your pages won't look that great. That's ok. We'll move into design with CSS next.
How long will it take?
If you buckle down, you could do this tutorial in a few hours. There are eight videos that clock in under an hour. But take your time. You'll want to follow along with the code on your own and spend some time modifying it until you understand all the elements and attributes.
HTML (HyperText Markup Language) files are text files that include tags that indicate the structure of a Web page. A Web browser reads the HTML file and interprets the elements, thus presenting the information in the way the Web designer intended.
An HTML file can be developed in a simple text editor like TextEdit, BBEdit or Notepad. Or you can use an HTML editor like Text Wrangler, Sublime Text, Komodo Edit or Notepad++. You simply save the file with the .html extension. Programs like Dreamweaver also create HTML, but it's good to learn how to hand-code from the start, so you can modify existing code or customize a template.
HTML5 is the current generation of html. It functions in the same manner as previous versions, but adds semantic tags, rich media and animation features and works with CSS3. XHTML (X is for extensible) was introduced in 2000, and it provided more structure and guidelines to HTML. Used in conjunction with stylesheets, XHTML separated document structure from formatting, thus allowing more flexibility in Web design.
An element (or tag) is a command written between angle brackets (the less-than and greater-than symbols).
Some elements have attributes that provide a variety of options. The attributes have associated values deemed by the designer.
Values are surrounded by quotation marks. If you happen to be copying html from another document, always be sure you aren't copying rich text quotation marks or apostrophes. They will not render correctly in the browser and are likely to cause problems in the code.
Most tags must also be closed after inserting the contained text.
This element bolded the text "Cindy's Page". The closing tag makes sure the rest of the text is not bolded in the document.
In HTML, elements could be written with uppercase or lowercase text and it made no difference to most major browsers. However, in XHTML, lower-cased tags were required, but code still renders regardless. It is considered consistent coding style to use lowercase for html elements in HTML5 and is the standard that most Web developers now use.
Another standard introduced by XHTML was the requirement that all elements must be closed. In most cases, you close the element after the text that you are marking up, as in the use of
- the opening tag on every html page. It tells the browser that this is an html file. - indicates the head section of the document. Nothing within the head tag actually shows up on page, but this is where designers can store information about the title or special search terms associated with the page. - indicates the title of the page. This title does not show up on the page itself, but in the top title bar or tab of the browser. The title should reside in the head section of the document. - indicates the beginning of the section with content in it. There should be no content between the or sections of the page. The attribute bgcolor can be used within the body tag to change the background color of the page. You can use the six-character hexidecimal code (see the websites that provide HTML Color Codes) or you can use a limited number of words to describe color, i.e. red, blue, lightblue, orange, etc.
or replaced to create bold text; replaced to create italic text; , , … etc. – indicates a level of heading size. Use headings as you would an outline, giving the smallest number to the item of the top importance and so on. You will control the size and typeface later in CSS. - indicates the opening of a paragraph; puts space between it and the previous content creating a new block of text. - provides a line break without the spacing of a paragraph; use the closing slash within the element to close it. This is an example of a standalone tag, because there is no text being surrounded by it, nothing to "mark up."
Format of an HTML file
Copy and paste all the code in the Code Sample to the right into a text editor like Text Wrangler (Mac) or Notepad++ (PC).
Note: All html files should be saved with .html extension. For the homepage of your site, name it index.html. This is the default filename for the home page when it is on the Web. When you upload the file to the Web, the user simply has to type the domain name into the browser to get to the home page of your site. Other pages on your site can be named anything you want, with the .html extension. For consistency and easy troubleshooting, filenames should be lowercase with no spaces.
Save the file you are working as index.html. It is a good idea to start with a new folder on your computer when you save the file. Open index.html in a browser (File, Open File). You should see the file render with the title, background color and heading and paragraph formats. Notice the structure of the page, the opening html element, the head and body sections, the use of the bgcolor attribute and the way that all elements are closed around the content it modifies.
Play with some additional headings, like h3, h4, to see how they work and change the bgcolor value. Feel free to add or change content to make the page your own!
Code Sample - Basic Elements
Your page should look something like this when you open it in a browser. Don't worry that it's not that elaborate yet. Next you'll learn to add images, links, lists and tables, and in the next lesson you'll learn to apply styles with CSS.
Images add visual interest to your pages. You have to have a digital image. Web browsers can read .jpg, .gif and png files. You can use images from a digital camera, create your own images in a graphic design program, scan photos or images or use images from other Web sites (but not copyrighted images). Images can be still or animated. This site doesn't cover graphic software packages, but there are many good tutorials across the Web on using Photoshop and Illustrator.
Once you have an image that you want to insert, the tag is as follows:
This will insert an image into the file named “imagename.jpg” that exists in the same folder as the page you are working on. If the image is in or will be in a different folder than the page, the folder path will have to be included in the file reference.
Notice the use of the closing slash. The img element is another standalone element, because it does not wrap around content to mark it up. It is simply a reference to a file.
- src - file source of image
- border= "n", where n is the size in pixels of desired border
- alt="text", where text is alternative text that shows when image is not available or when someone is using a text reader (as in visually challenged); alt tags are very important for accessibility standards
- width="x", height="y" – where x and y are specific dimensions of the file. Be careful with this. If you do not use the proper proportions, your image will be distorted on the Web.
- align="left" or align="right" – used to wrap text around an image
Many of the attributes above will be replaced with CSS for further styling.
Using a Background Image
Use the background attribute of the body element to use a background image for an entire page. If it is located in a different directory, then the directory path must be specified.
Small background images will be tiled to fit the screen.
You can make your own background images (in Photoshop, etc.) or you can find images to use as backgrounds all over the Web. To save an image from the Web, simply hold down the right click or ctrl-click on the image or background and use the Save command. But, you should never use images on your Web site that you do not have permission to use.
In the early days of the Web, designers used colorful backgrounds on their pages. As the novelty has worn off, most designers prefer to use black text on white backgrounds (easier to read). They use images and other elements to add color to the page. We'll be working with various methods for using background images in smaller sections of pages and developing interesting layouts with CSS.
Code Sample - Images
Modify the code from the file you started above and continue to save it as index.html. When you are typing, open and close tags as you go, rather than simply copying the code or typing the file in a linear manner from top to bottom. This will allow you to understand the things you are marking up.
Refresh the file in the browser. Refresh the page every time you make a change.
Your page should now look something like this. You should see your image rendering. Use the width attribute to adjust your image size, if it is too large, but don't try to make it larger than the original quality. That will create pixelation and your image will appear blurry.
Code Sample - Links
Your page should now have a link on it. You should be able to click on the external link. Does it open in a new window? For the internal link, you will have to make a page with that name to be able to see it working. Change the colors in the body element to see how it affects the links.
Lists provide ways to format collections of content. You can use an ordered list (numbered) or an unordered list (bulleted).Ordered List- a numeric list; requires using nested tags
An ordered list will appear like this in browser:
- University of North Carolina at Chapel Hill
- University of Richmond
- University of Texas at Austin
Unordered List- a bulleted listUse
- instead of
An unordered list will appear like this in browser:
- University of North Carolina at Chapel Hill
- University of Richmond
- University of Texas at Austin
- TYPE - for unordered lists, numbers are the default, but you can use an A for Capital letters, a for lower case, I for Uppercase Roman Numerals and i for lowercase Roman.
- START - insert the start value; 1 is default.
- Use the attribute TYPE to set bullet shape (disc, circle, square) for unordered lists
Code Sample - Lists
Add an ordered or unordered list to the html page you have been working on. Refer to the code format above.
Below is an example of an unordered list.
Tables provide formatting in rows and columns. Use tables for data, not layout. In the early days of Web design, designers used the table feature to establish a grid for layout. But now, with the use of CSS, we have much more powerful, consistent and responsive ways to create a Web page layout.Like lists, tables also use nested elements.
| (table data).
Code Sample - Tables
Add a table to the html page have been working on. Notice how the table elements work together to create rows and columns. Additional rows and columns of content to the table on your page. If any of your elements aren't displaying properly in the file you have created, troubleshoot them by checking each element carefully, making sure you used proper spelling, used angle brackets and quotation marks properly and closed any tag you opened.
Your table should look something like this.
Code Sample - Navigation
Add navigation to your site using the unordered list method and make at least two additional pages, with content. Navigation should be in the same place on each page and have all the same elements.
The code above includes everything we have covered in this tutorial - Basic Elements, Image, Links, Lists, Tables and Navigation. Use this code as a basis for making your own first website. Make sure all images and links work and that your content displays properly on all pages. Test Everything!
Your page should look something like the example below.
Web developers will often put comments in their code. These do not affect the appearance of the site, but provide code delineation or instructions for the designer or others who may be working on the page. See the code sample to the right.
When a tag is no longer used or supported in HTML, it is considered deprecated. So, you should avoid using them. You should pay attention to developments in HTML to know which tags are deprecated and what replaces their functionality.
Text Formatting - Early versions of HTML did not allow the author the control to specify a particular font. Font selection was at the mercy of users' preferences. Recent versions of HTML now allow the designer to specify font sizes and styles, given that the user has those fonts installed on their machine. If the user does not have the designated font, the default is shown.
The font tag is considered deprecated. Most Web designers now use CSS to control text formatting on Web pages. This allows the designer to create a style and have it apply globally to all pages on a Web site.Another deprecated element is
Code Sample - Comments
The code above is fully commented to make it helpful to find sections of the site or for other coders who will work on it later.
You have made this wonderful page, but for now it just lives on your computer. To get it on the Web, you have to have space on a Web server. You can do this by going through a Web host and getting a domain. There are many Web hosts that all have different features and pricing models, so review a few before you purchase one. Most hosts provide both the Web hosting (server space) and domain registration, although these are separate processes. Some hosts to consider include Bluehost, Reclaim Hosting, HostGator and Dreamhost. See a comparison at PCMag.com.
You might also have server space via other means, a school or work account, so check out your options.
Once you have a way to host your files, you will need to transfer them to the Web. There are several methods, but the general process is called File Transfer Protocol (FTP). You can use an FTP client like Fetch or Filezilla or you can try a browser plugin like Fire-FTP for Firefox. And some Web hosts, like Bluehost, have file management tools as part of their control panel.
On most hosts, you have to upload files to the "public" folder. This is the public-facing folder on your site. Anything not under the public folder will not be able to be seen by the public. It is a place where you can store files in the cloud to access later. Sometimes the public folder is called "public_html" but this may vary based on your host.
In your FTP program, change to your public_html folder. This is where you will upload files associated with your domain. You will use the upload or "put" feature to transfer copies of your files to the server. The folder on the server should resemble the file structure you are used to seeing in the Finder on your computer. You are simply creating a copy on the server. Once the files are transferred, they can be accessed via a browser by anyone on the Web!
Later, you will learn about creating folders and subdomains on your site. For now, just keep your files very organized for each Web project. The location of a file matters when it is being accessed by another file, so this will assure that your links and images function properly.
That's a pretty good introduction to HTML. You should now have an understanding of the basic elements and attributes and how to use them on a page. We'll have a few more HTML elements to add after we learn a little about about styling with CSS in the next tutorial.