So finally, here we are. This chapter is somewhat special and fairly different from what you've read so far. In fact, it's a practical exercise. You can now no longer simply read my chapters half asleep, you'll have to get your hands dirty at the same time as me.
Although you've read a lot of theory so far, you're probably wondering how webmasters actually create such attractive websites. You're saying to yourself that you are still a long way from having the knowledge needed to build a whole website... Well, you're wrong!
Drafting the design
I can just imagine it. You're saying, "Great, we're going to create a complete website", so you open your text editor (Notepad++, for example), look at me and ask, "Well, what line of code do we start with?".
And there's where I have to stop you. Take a pencil and paper: you first have to think about what you want to create as a website. What's it going to talk about? Do you have a theme or aim?
I know from experience that most of you are "just trying to learn" at this stage. So you perhaps don't have any clear idea in mind. In this case, I suggest you create a website to introduce yourself and develop your online presence: this website will talk about you and will include your resume, your future projects and, why not, your blog.
As for me, I'm going, in this practical exercise, to build the website of our mascot Zozor, our famous donkey (figure below). Zozor has decided to go on a trip around the world and his first stop will be... San Francisco! He thus wants to create a website for people to know about him and follow his journey around the world.
The first step is to draft the design to have a goal of the website to be built. From there, there are two possibilities:
either you are a graphic designer (or you know one) who is used to working out designs with programs like Photoshop;
or you are not very creative or lack inspiration, and in this case, you are going to get your inspiration from websites like https://html5up.net/, which provide ideas for designs and can even give you the ready-made HTML/CSS code!
In my case, I referred to Jiyong Fan, a graphic designer, who suggested the design (which I like a lot!) that you can see in the figure below.
Draft design: Fan Jiyong
This draft is actually just a picture of the result we want to obtain. I asked the graphic designer to provide me with the elements that will help me build the design, in other words the color codes used, the cropped images (figure below) and the fonts I'm going to need.
Downloading the images and fonts
So all we have to do is build this website! We're going to proceed in two stages:
We're going to build the page HTML outline.
Then we're going to format it and do the page layout using CSS.
Come on, let's get to work!
Organizing the content in HTML
The first thing to do is to distinguish the main blocks on the mockup. These blocks will form the outline of our page.
To create the outline, we are going to use various HTML tags:
the HTML5 structural tags, that we know:,,, etc. ;
the general purposetag when there is no suitable structural tag.
How do I know which tag to use?
It's up to you to decide. Preferably use a tag that makes sense (such as the,,structural tags), but if no tag seems more appropriate to you, opt for thegeneric tag.
Look at the figure below to see what I suggest as a structure.
We can imagine other ways of breaking down the structure and you should bear in mind that my suggestion is not necessarily the only solution!
Although not all the tags that we're going to use appear in this mockup, it gives you an idea of the nesting I suggest for the elements.
The HTML code is not really the complex part of building the website. In fact, if you have understood how to nest tags, you should have no trouble in writing a code similar to mine:
Little note: as you can see, the whole content of the page is placed in one largetag with a. As this tag includes all the content, it will allow us to determine the page size easily and center our website on the screen.
Apart from that, there are no major problems to be pointed out. Note that I haven't necessarily thought of all the tags the first time: when designing in CSS, I find you sometimes need to include some tags of ablock to help you build the design.
As you might imagine, the website doesn't look too great yet (to say the least). You can see the current result in the figure below.
It's the CSS code that works the magic.
Formatting in CSS
Things get a bit more difficult once you reach the CSS stage. Indeed, it takes work (and sometimes a few tricks) to obtain a result similar to the mockup. I say "similar to" as you'll never obtain the same result to the nearest pixel.
You need to grasp this clearly: the aim is to obtain the closest possible result, without seeking perfection. Even if you obtain what you consider to be "perfection" in one browser, you can be sure that there'll be differences in another (older) browser or on a computer other than yours. We're thus just going to do our best and that will already involve quite some work, as you'll see.
To format the design, I'm going to proceed in several steps. I'm going to deal with the following items, in the order indicated:
Define the page's main styles (website width, background colour, default text colour).
Header and browsing links.
Banner (representing the San Francisco bridge).
Main section of the page's body, in the center.
For the purposes of the design, my graphic designer used three fonts on his mockup:
You can find these fonts in the file I got you to download above. If you haven't done this yet, I strongly recommend you download it now.
Most computers are provided with(though not necessarily all, in which case you can download it). The other two fonts are a bit special, however, and are unlikely to be on your visitors' computers. We're going to download them.
As you know, several versions of these fonts need to be provided for different browsers.only provides theformat for downloading. On the other hand,provides a font generator to be used in CSS3 with: you send it aand the tool converts the file into any other format needed and even provides you with the ready to use CSS code!
I used it to generate the various versions of the two exotic fonts that I'm going to use. Then, in my CSS file, I added the code provided to me byto declare the new fonts:
In addition to this, you have, of course, to make available the font files. As you can see, I've created a subfolder for the various versions of my fonts.
Defining the main styles
We can now define a few global styles for the whole design of our page. We're going to define a default background image, font and text color, and more especially we're going to size our page and center it on the screen.
With, the block covers the entire page, so I set the width limits to 900 pixels. With automatic margins, the design will be centered.
If you want to create a design that fits the dimensions of the visitor's screen, set a width as a percentage instead of pixels.
I've used the CSS property(that we haven't seen before) to ensure that my titles are always written in uppercase. Indeed, this property changes the text to uppercase (it can also do the opposite with). Note that we could also have written the titles directly in uppercase in the HTML code.
The figure below shows you what you get for now with the CSS code. Although we're still a long way from the final result, it already feels a bit like we're "getting there".
Header and browsing links
According to the structure I've suggested, the header also contains browsing links. Let's begin by defining the header and, in particular, the logo at the top left. We'll then see how to format the browsing links.
We going to make a distinction between the header and the page body with a background image. The items are positioned usingand we're going to customize the fonts and sizes. Nothing out of the ordinary for the time being.
The browsing links
The formatting of the browsing links is a bit more interesting. As you saw, I created a bulleted list for the links... but such a list is usually displayed height-wise, not width-wise. Fortunately, it's easy to change, as you'll see:
The main new thing is the CSS definition, which removes the round image used as a bullet. Each list item () is positioned as an, which allows us to place the links side by side as we wanted.
The other definitions don't contain anything out of the ordinary dimensions, colors, borders... All things you already know about. Note that I don't necessarily find the right values on the first try. Sometimes it takes some trial and error to obtain an appearance close the original mockup.
The figure below shows the result obtained using the latest CSS additions.
So, let's now turn to an exercise that's a little more difficult but very interesting: the banner! Our mockup has a nice banner representing the San Francisco bridge. This banner on your website may need to change. As an illustration, here's the latest blog of our friend Zozor, who's just visited San Francisco.
The banner is interesting for several reasons:
it has rounded edges;
the description is written on a slightly transparent background;
the "See the article" button is implemented in CSS, with rounded corners;
a shadow gives volume to the banner.
Here's the code I used to produce the whole banner:
This code is fairly technical and full of CSS features. It's perhaps the most difficult part in building this page.
You can see that I've chosen to display the image of the bridge as a background image in the bannerblock.
I've also given it a position relative to the banner, without using properties to change the offset... Why? Normally, a relative position without an offset serves no purpose... And yet, it was particularly useful to me in placing the "See article" button at the bottom right of the banner. In fact, I've placed the button in an absolute position inside.
Shouldn't the button be located at the bottom right of the page?
No, remember what I told you: if a block is placed in an absolute position in another block which is itself in an absolute, fixed or relative position, it will then be positioned inside this block.
Our banner has a relative position (without any offset). As the button has an absolute position inside, it's thus placed at the bottom right of the banner!
This technique is particularly useful and powerful in building a design. and should be remembered!
Final detail: for the banner legend, I've chose to use transparency with thenotation rather than theproperty. Indeed,would have made the entire contents of the block transparent, including the "See article" button inside. I found it preferable to make only the background color transparent rather than the whole block.
The result is quite nice (figure below).
Looks great, don't you think?
To produce the colour graduation of the "See article" button, I've used a background image representing the graduation and I've repeated this image horizontally. You should know that there's a CSS3property which allows you to produce graduations without having to resort to a background image. As its implementation is a bit complex for the time being, I've chose not to use it in this example, but you can find out about it if you want!
The body, in the center of the page, in our case consists of a singletag (but there could be several tags, of course).
No real difficulties as far as the body is concerned. The "About the author" block is positioned as an in inline-block. We'll play with the rounded corners and shadows and adjust the text margins and size a bit, and here we are!
The hard part here was to manage to place the arrow to the left of the "About the author"block to give the effect of a bubble. Again, our best friend is absolute positioning. The technique is the same: I positioned theblock relatively (without inserting an offset), which then allows me to position the arrow image relative to theblock (and not relative to the whole page). By adjusting the image offset, I can accurately place it where I want to the nearest pixel (figure below)!
It only remains for us to lay out the footer. It consists of three sub-blocks that I've produced byto which I've assignedto identify them better. These blocks are positioned withside by side.
A couple of small points about the footer:
I've used CSS3' multiple background images feature to separate the body from the footer. It includes three images: the separator, the small upwards arrow and a slight graduation.
I've changed the bullet of the "My Friends" list at the bottom right, using theproperty that allowed me use a custom image rather than the standard bullets. There are many specific CSS properties like this one and we can't look at them all one by one in this course, but now that you're used to CSS, you'll have no trouble learning how to use them simply by reading the annex listing the main CSS properties.
Our design is now completed (figure below)!
Ah, so you thought you'd finished? Unfortunately, there's still a bit of work to do: we have to test our website on various browsers. Ideally, it's best to do this at each stage in building the design. In particular, older versions of Internet Explorer (IE6 to IE8) need some attention as the result is not necessarily what was expected...
Ensuring compatibility with IE
Since Internet Explorer 9 (IE9), we really have no further reasons to complain about the legendary lag of Internet Explorer in managing CSS. See the result for yourself (figure below). It's very good in this browser and doesn't need any adjustment.
Seeing the result in older versions of Internet Explorer might, however, give you a few grey hairs.
How can I see what the results would be like in IE6 to IE8 if I have IE9?
I told you about IETester which is a practical, if unstable, tool (it crashes often). You can try it out to test your website in older versions of IE.
There is, however, a more stable, faster solution: press the key on your keyboard when you're in IE9 and a web developer bar appears. There, a menu allows you to change IE's behaviour (figure below) to simulate older versions (from IE7 onwards).
This is often a pretty scary experience.
The figure below shows you what you get in "IE7 mode".
Before you pack your suitcase and go and live in Timbuktu away from this cruel world, let me cheer you up with this reassuring sentence: there's a solution to every problem (repeat this as many times as necessary).
In fact, our website only ran into two main problems in older versions of IE:
positioning is not well handled in IE6 and IE7, with the result that most of our positioning tags don't work for the time being... However, we've seen a workaround that can solve this problem without too much effort!
HTML5 structural tags (,,etc.) are not well handled in IE6, IE7 and IE8, which makes for serious display problems... But, there again, this problem can be solved by adding a small script at the beginning of your HTML code!
On the other hand, you'll have to forget about certain newer features of CSS3 that are not supported in these old versions:
multiple background images;
As these are appearance-related features, we won't attempt to get them to work in older versions of IE. If you are really keen to do so, however, I can tell you that, once again, scripts are available that can emulate most of these missing features, but this will require quite a lot of extra work and your website may work slower in these browsers. As long as the website remains readable in older versions of IE, I recommend that you don't worry too much about these problems.
When you accept your website "not looking quite so nice" in older browsers, this is referred to as graceful degradation. This means that, while not attempting to obtain all effects, you nevertheless strive to have a website that is still readable in older browsers.
Running HTML5 structural tags
Adjusting the inline-block position
To manage theposition, we saw a special style sheet had to be created for older versions of Internet Explorer. Slightly different CSS has to be used to ensure that these older versions of IE "understand" what to do.
By creating a special style sheet for older versions of IE (that you could call) and using the technique below, you can reproduce the behaviour oftags:
Thestylesheet will contain statements like this:
This technique should be applied to each item positioned using.
There are other differences in older versions of IE: the text is not always the right size, some blocks are also incorrectly dimensioned, etc. These differences have to be addressed on a case-by-case basis by thestylesheet.
Checking the validity
W3C provides a tool called the "Validator" on its website.
The validator is a type of program that analyzes your source code and tells you whether it's correctly written or contains errors you need to fix.
Remember: W3C set up standards that have to be complied with to make sure that all websites speak the same "language".
There's an HTML validator and a CSS validator to (to be included in your favourites!). The CSS validator has a few bugs (it flags some perfectly valid CSS sheets as invalid) that we're not going to dwell on here. The HTML validator, however, is going to be very useful to us: here's its address http://validator.w3.org.
You can validate your web page in three different ways, which is why there are three tabs:
send the file;
copy and paste the HTML code.
Our website is not yet available on the web as it doesn't have a URL address. The best way is thus to send thefile we wrote or copy and paste the HTML code directly.
If you send your HTML code and everything goes well, the validator will reply with the message shown in the figure below.
In this case, this means that all is well and that you have built your page well!
Unfortunately, you often have errors. In this case, don't panic like this:
HELPPPP! My web page isn't valid, I'm not going to manage, there are errors all over the place, do something, help meeee!
You had a nice web page, it displayed well, it was pleasing to the eye, and yet the validator sends you a worrying message in red telling you that your web page is not built correctly.
First of all, get this firmly into your head: just because your web page displays correctly doesn't mean that it doesn't have errors. Your web page can be very stylish and still have a lot of errors.
What's the point of correcting them then?
The thing is that browsers "try" not to display errors, when they encounter them, so as not to disturb the user. But nothing says that other browsers won't behave strangely!
Having a valid web page thus allows you to rest easy knowing that you've done things properly. This simplifies the work of the programs that read web pages.
In addition, and this has been proven, a correctly built web page is more likely to be better positioned in Google's search results and this will bring you... more visitors!
Here's a list of tips that can help you troubleshoot errors that may be reported sooner or later:
All your texts should generally be in paragraph tags. You're not allowed to put text directly betweentags without having surrounded them with the famoustags. This also applies toline returns that must be within paragraphs. It's a very common mistake among beginners.
All your images must have a attribute specifying what the image contains. If, by chance, your image is purely decorative (you can't find a description of it), you're allowed to put nothing as the value for the attribute.
Your tags must be closed in the right order.
Keep this scheme in mind as many beginners make this mistake.
If your links have, you have to replace them by thecode to avoid browser confusion.
Finally, make sure that you haven't used old and now obsolete tags in HTML5 (such as the oldtag, or thetag, etc.)
The validator will tell you "Element XXX undefined" (tag unknown) and "There is no attribute XXX" (attribute unknown).
Everyone makes mistakes, so don't panic. Correct your web page step by step your until the validator displays a correct result in green.
The final code
I've provided the final code of the web page we've built. You can also view the result (figure below) online through a web code.
You can also download a ZIP file containing all the files of the website to test it at home:
Download the website files (500 KB)
To ensure that website works as best as possible in older versions of Internet Explorer, you'll see that this final code doesn't include any sheet. Instead, I've used another technique which involves assigning a special class (such as) to thetag only in older versions of IE, which lets me know what version of the browser is used in the CSS file (allows you, for example, to change the style of the footer in IE7).
Congrats, you made it to the end of this part! Don't forget to complete your exercises before moving on to the next part. You will find the links to the quizz and the assessment of this third part in the course outline. Good luck! :)
Want to learn a little HTML?
Sounds like a great idea. Hence the reason I’ve put together this HTML tutorial for beginners.
There are at least 1.2 billion websites in the world today, and practically all of these websites use HTML in one way or the other.
P.S: If you don’t want to learn HTML and start building your website right away, with no coding required, take a look at this guide here: How to Make a Website for FREE (without learning HTML).
Introduction to HTML
What is HTML?
HTML, an acronym for HyperText Markup Language, is a computer language for creating websites and web applications. Consisting mainly of a series of codes usually written in a text file and then saved as html, code written in the HTML language translates into a beautiful, well-formatted text or a combination of text and media when viewed through a browser.
HTML was first developed by British physicist Tim Berners-Lee in 1990, and it has gone through so many evolutions since then that the most recent version can achieve far more than was imagined possible when the language was first invented.
In this tutorial, we will be going through the basics of the HTML language and all you need to know to get started with HTML as a beginner.
First, a quick rundown of all the HTML versions since HTML was invented.
- HTML 1.0: This was the barebones version of HTML and the very first release of the language.
- HTML 2.0: This version was introduced in 1995 and it gradually evolved to allow extra capabilities including: form-based file upload, tables, client-side image maps and internationalization.
- HTML 3.2: In an attempt to ensure development of standards for the World Wide Web, the World Wide Web Consortium (W3C) was founded by Tim Berners-Lee in 1994. By 1997, they published HTML 3.2.
- HTML 4.0: Later in 1997, the W3C released HTML 4.0 — a version that adopted many browser-specific element types and attributes.
- HTML 4.0 will later be reissued with minor edits in 1998.
- HTML 4.01: In December 1999, HTML 4.01 was released.
- XHTML: The specifications for this was introduced in 2000 and it was recommended to be used as the joint-standard with HTML 4.01. It incorporated XML to ensure code is properly written and to ensure interoperability between programming languages.
- HTML5: The W3C published HTML5 as a recommendation in October 2014 and will later release HTML 5.1 in November 2016.
Choosing Your HTML Editor
If you will be creating web pages in HTML, you will need an HTML editor. There are several benefits to using an HTML editor.
A good HTML editor will keep your code clean and organized. It will also detect when you open a new tag and automatically close it to avoid you having buggy code and as a result reducing how much typing you have to do. Most HTML editors today also allow you to preview your web page to see how it will look in a web browser using their WYSIWYG feature.
There are many free and paid HTML editors, and below are some of the top options you can choose from:
Basic Building Blocks of HTML
Once you’ve decided on the HTML editor you want to use, the next step is to understand the building blocks of HTML. If you want to code in HTML, it is essential to understand these building blocks. They include tags, attributes and elements. We take a basic look at them below:
Introduction to Tags
Once you’re into HTML, the very first thing you need to understand is tags. In essence, tags separate normal text from HTML code.
So in essence, when it comes to HTML, tags make the difference between whether your document is displayed as ordinary text or “transformed text” — which is basically a code of text that appears to display a series of things (could be hyperlinks, images, media, or other formatting) based on what it is instructed to display based on tags.
Let’s take a look at the word “He is a boy” as a basic example:
- In ordinary text format you get: He is a boy.
- In bold text format you get: He is a boy.
However, to achieve what we have in the bold format you have to use the <b> tag.
So in raw HTML we have something like <b>He is a boy</b> which the browser then translates to this: He is a boy.
However, the very same “He is a boy” could come out italicized.
This is achieved using the <i> tag.
So we have: <i>He is a boy</i> which then comes out as He is a boy.
It could also come out hyperlinked. This is achieved using the <href> tag.
In raw HTML we have: <a href=”https://websitesetup.org/”>He is a boy</a> which then comes out as He is a boy.
There are a few things you should understand about tags, though:
- Tags are practically the building block of HTML — you can’t do HTML without tags; if stuck on what tag to use, be sure to check out our HTML periodic table.
- Almost every open tag must be closed. However, there are exceptions. An example of a tag that does not have to be closed is an empty tag, such as the line break: <br>.
- Tags are contained in a less than (“<”) and greater than (“>”) angle bracket. Closing tags contain a trailing slash that becomes before the name of the tag being closed, though: Example of an open tag: <b>. Example of a closed tag </b>.
- Every HTML file begins with the opening tag <html> and ends with the closing tag </html>. Of course, the very first line of the HTML file should declare the type of document so that the browser know what HTML flavor you use. This is why you see HTML pages start with “<!DOCTYPE html>” before the HTML code begins.
Based on the above, most HTML files basically look like this before content is added:
The section that follows the <head> tag usually contains information about the document such as its title, meta tags and where to locate its CSS file — most content that is not visible directly on the browser page. The section between “<body> and </body>” (which we represented with “MAIN CONTENT”) is where the main content of the HTML file, that the viewer will see in the browser, will be included. This includes everything from the first paragraph to hyperlinks to formatting to multimedia and all else.
Introduction to Elements
In HTML, an “element” consists of the opening and closing tag as well as the content in-between these tags.
Going back to our “He is a boy” (in bold) example, we have this in HTML: <b>He is a boy</b>. The text “He is a boy” is surrounded by an open and closed tag. However, everything, including the opening tag, the content and the close tag is an element.
So whenever a tag is opened, content is introduced and the tag is then closed, we have an element.
An element could be in the most basic form or in the most complex form. Why? Because anything in between an open tag and a closed tag as well as those tags is an element. That means we can have elements within an element. In this case, our simple example in which we bold he is a boy (<b>He is a boy</b>) is an element. However, you will note that we said earlier that HTML documents contain the <body> tag before the content begins — the content could include hundreds of different elements, but all these elements are part of the “body” element (since the body element was opened, contains content and was closed).
Introduction to Attributes
While HTML documents basically use tags for everything, we sometimes want to communicate additional information inside an element, in this case we use an attribute. The attribute is used to define the characteristics of an element, and it is used inside the opening tag of the element. Attributes are made up of a name and a value.
Basically, the value of an attribute is placed inside a quotation mark using the format <tag attribute=”value”>Your Text</tag>.
Example:<p align="center">He is a boy</p>
In this example, we are instructing that “He is a boy” be aligned to the center of the document.
Getting Started With HTML
Assuming you want to create your own basic HTML document today, how do you get started? From creating page titles to creating forms, we walk you through how to get started with HTML below.
Creating The HTML <head> Element
When creating an HTML document, one of the first things you will create is the <head> element. This contains metadata (or data about the HTML document). This includes information such as the character set, document title, document styles, scripts, etc.
Some of the elements in the <head> include the title, which is created with the <title> tag.
Example:<title>This is our page title</title>
This title will be displayed in the browser tab, and it is also what will be indexed as the title for the page when search engines crawl your website.
This also includes the <meta> element, which is often used to specify information search engines can use to describe the content in their listings; this includes the description, keywords, author information, etc. The <meta> element also specifies the character set the HTML document uses.
Creating Headings in HTML
Headings play a major role in the success of a website. Firstly, they make it easy for readers to scan the content of your pages. Secondly, and perhaps more importantly, they communicate the structure of your web pages to search engines — and can as a result impact how your content is ranked in search engines.
That said, it is important to avoid using heading tags to make your text big or bold. There are other tags that can be used for that (which we’ll get to later in this section). Instead, heading tags should be used solely for structure.
There are six heading tags in HTML: <h1> to <h6>, with the <h1> tag indicating the most important heading and the <h6> tag indicating the least important heading.
To create headings, simply decide what heading you’re creating, open the heading with the regular heading tag and close once you’re done.
HTML Headings Example:
- <h1>This is Your First HTML Heading</h1> (the largest)
- <h2>This is Your Second HTML Heading</h2>
- <h3>This is Your Third HTML Heading</h3>
- <h4>This is Your Fourth HTML Heading</h4>
- <h5>This is Your Fifth HTML Heading</h5>
- <h6>This is Your Sixth HTML Heading</h6>
The next step is to start creating paragraphs. Paragraphs can be created with the <p> tag.
Example:<p>This is your first paragraph.</p> <p>This is your second paragraph, and you will be creating many more paragraphs.</p>
That said, it is important to realize that writing in HTML is very different from writing in pure text; so if you break up text inside HTML without starting a new paragraph, it won’t really matter when the text is displayed by the browser. Instead, you want to use a line break, which is represented by the <br> tag.
Example:<p>This is a new paragraph. And I want to use a number of new lines. So I’m breaking it up.</p>
This will not come out as the following:
This is a new paragraph.
And I want to use a number of new lines.
So I’m breaking it up.
Instead, it will come out as this:
This is a new paragraph. And I want to use a number of new lines. So I’m breaking it up.
So, how do you break texts into new lines like in the example below?:
This is a new paragraph.
And I want to use a number of new lines.
So I’m breaking it up.
By using line breaks.
Example:<p>This is a new paragraph.<br>And I want to use a number of new lines.<br>So I’m breaking it up.</p>
That said, it is important to note that the line break (<br>) tag is an empty tag, so you don’t have to close it.
Formatting Text in HTML
The next step is to format your text in HTML. This is where you can indicate whether you want your text to come out bold, italicized, underlined, subscripted, superscripted, etc. This is a basic guide, so this section won’t be the be-all-end-all for formatting; instead, we will only include some basic formatting tags. The process for using other forms of formatting is simple; just find the tag you want and go ahead:
Using bold: <b>He is a boy</b> comes out as He is a boy
Using italics: <i>He is a boy</i> comes out as He is a boy
Underlining text: <u>He is a boy</u> comes out as He is a boy. However, it is worth noting that the <u> tag was deprecated in HTML 4.01 and was redefined to represent stylistically different text in HTML5. As a result, it is recommended to use CSS to indicate text that should be underlined. Since this is a basic guide, though, we’re keeping it here.
Using subscript: <sub>He is a boy</sub> comes out as He is a boy
Using superscript: <sup>He is a boy</sup> comes out as He is a boy
For other tags that can be used to format, you might want to take a look at the glossary at the end of this resource where we include a lot of relevant HTML tags.
Ordered and Unordered Lists
Sooner or later you will have to create lists. Lists could be ordered (i.e. numbered) or unordered (i.e. unnumbered).
Here is an example of an ordered list:
- Item 1
- Item 2
- Item 3
Here is how to create it:<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
Here is an example of an unordered list:
Here is how to create it:<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
If it is not already obvious. Here’s a breakdown:
The <li> tag is used to indicate each item on the list. When making a list, you can use the <ol> tag to indicate an ordered list (“o” = ordered and “l” = list) or the <ul> tag to indicate an unordered list (“u” = unordered and “l” = list). You get the gist?
We can also have nested lists, or a list within a list.
- Item 1
- Item 1 nested
- Item 2 nested
- Item 2
- Item 3
This can be created with:<ul> <li>Item 1 <ul> <li>Item 1 nested</li> <li>Item 2 nested</li> <li>Item 3 nested</li> </ul> </li> <li>Item 2</li> <li>Item 3</li> </ul>
As you can see, you simply open another list tag — ordered (<ol>) or unordered (<ul>) — depending on what you want before closing the item you want nested.
The web is one massively interconnected network of pages. If you create a website, whether internally or externally, or both, you will have to link to other pages. A link to an internal page on your website, or to an external page on the web, is called an hyperlink. Also, while people usually link a text, any HTML element — an image, for example — can be linked.
The <a> tag is used to define links in HTML, while the “href” attribute is used to specify the destination of a link, the link is then put in a quote after the “equal to” sign before the tag is closed.
To create an hyperlink, this: <a href=”https://websitesetup.org”>YOUR LINK TEXT HERE</a> will come out as YOUR LINK TEXT HERE
Now, assume you are linking to a local file; in which you have all your html pages in the same folder, you don’t have to include a website URL. Just add the file path. For example, if linking to a file titled about-page.html, your hyperlink becomes <a href=”about-page.html”>YOUR LINK TEXT HERE</a>, which links to the about-page.html file.
If the HTML file you want to link to is local but in a folder different from the main folder, you simply specify the file path. For example, if the file is in the “files” folder under the main document where the current document you are writing is, your hyperlink goes something like this <a href=”files/about-page.html”>YOUR LINK TEXT HERE</a>
You might want to specify how you want the link to be opened e.g. in a new window/tab. This is done with the target attribute.
<a href=”about-page.html” target=”_blank”>YOUR LINK TEXT HERE</a> specifies that the link should be opened in a new tab.
<a href=”about-page.html” target=”_self”>YOUR LINK TEXT HERE</a> specifies that the link should be opened in the same tab.
There are other attributes that can be used to communicate different ways a link should be opened. They are:
- _blank – Open in a new tab.
- _self – Open in the same tab.
- _parent – Open in the parent frame
- _top – Open in the full body of the window
- framename – Open in a named frame
You can also have an image point to a link.
Example:<a href="https://websitesetup.org"> <img src="heisaboy.jpg" alt="He is a boy"> </a>
This tells the browser to display an image pulled from the image file “heisaboy.jpg” and have it link to https://websitesetup.org. The “alt” attribute represents what should be shown if the image is unable to be displayed (due to browser settings or some other stuff that present images from showing).
Images are added to an HTML document with the <img> tag. The <img> tag is an empty tag, so it does not need to be closed.
Example:<img src="heisaboy.jpg" alt="He is a boy">
This is a basic example of telling the browser to display an image titled “heisaboy.jpg” pulled from the same directory as the HTML document. The “alt” attribute tells the browser to show a text (known as an “alternative text”) called “He is a boy” if for some reason the browser or internet settings prevents the browser from displaying images. If you want to pull an image in another directory, or on an external site, the full address/path should be specified.
Going beyond the basics, we could also use other attributes to better customize the image. For example, the “style” attribute can be used to specify the width, or the height, or both of the image.
Example:<img src="IMAGE PATH" alt="YOUR ALTERNATIVE TEXT" style="width:width;height:height;">
(the italicized “width” and “height” should be replaced with the actual values in “px” (e.g. “20px”) you want for your image.)
As you get deeper into HTML, you will want to learn various ways to present information in a more organized way. One such way is through the use of tables.
Tables are created with the <table> tag. Each header in a table is specified with the <th> (“table header”) tag while each row is specified with the <tr> (“table row”) tag. The table data is then indicated with the <td> tag.
Example:<table> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> <tr> <td>Input 1 under header 1</td> <td>Input 1 under header 2</td> <td>Input 1 under header 3</td> </tr> <tr> <td>Input 2 under header 1</td> <td>Input 2 under header 2</td> <td>Input 2 under header 3</td> </tr> <tr> <td>Input 3 under header 1</td> <td>Input 3 under header 2</td> <td>Input 3 under header 3</td> </tr> </table>
This gives us something like this:
As you can see, while we have a table it is a bit unorganized. To make this organized, we can style our code. To do this, we add some styling to the code. In this case, we are increasing width:<table style="width:100%"> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> <tr> <td>Input 1 under header 1</td> <td>Input 1 under header 2</td> <td>Input 1 under header 3</td> </tr> <tr> <td>Input 2 under header 1</td> <td>Input 2 under header 2</td> <td>Input 2 under header 3</td> </tr> <tr> <td>Input 3 under header 1</td> <td>Input 3 under header 2</td> <td>Input 3 under header 3</td> </tr> </table>
This results in something more organized, as you can see below:
Now, you might want to go more advanced and use borders, set horizontal or vertical alignment for the content of the table, introduce dividers, padding, etc. However, you will need to learn some CSS to do stuff like this. We’re keeping this tutorial basic, wo we won’t get into that.
Quotations in HTML
There are different types of quotations, and these quotations are represented by different elements.
For a basic quotation, here’s an example:<p>This is a sample. And <q>Here is our quote</q></p>
This comes out as: This is a sample. And “Here is our quote”
When you use the <q> tag, quotation marks are automatically added to what is enclosed within the tag.
You can also use blockquotes, which is done with the <blockquote> tag.
Example:<p>This is a sample. And <blockquote>Here is our blockquote. In this example, we try to demonstrate how to format text to indicate a blockquote in HTML. This is different from ordinary quotes, in that the actual "quote" symbol may or may not be added depending on CSS styling, but the text is highlighted.</blockquote></p>
This comes out as this:
Using Comments in HTML
When doing any form of coding, it is important to learn how to include comments in your code. Comments are used to make your code more organized; basically, you can include a reminder to yourself or a note to others to make things easier. Initially, it might not seem important, but when you start writing hundreds or thousands of lines of code, and when things seem to start to get complicated, comments will come in handy.
Comments won’t be shown to the viewer by the browser. However, they can be seen in the source code.
Comments can also be used anywhere in the code, and they won’t change the function of your code in anyway.
You can include a comment by opening a bracket, including a double hyphen, adding your comment, including another double hyphen and closing your bracket.
Example:<!-- This is a comment used to indicate information I want to remember, or that I want others to take note of, when looking at this code in the future -->
It is also worth noting that, especially when debugging, you can comment out lines of code. This way, the code remains in the document but does not function since you have commented it.
Example:<!-- <b>He is a boy</b> -->
In this case, while “He is a boy” is supposed to come out as bold we have commented it and it would be ignored by the browser. In this case, as far as the browser is concerned, we have nothing.
This could also be used this way:
<b>He <!– is a –> boy</b> which shows He boy. This is because we commented out “is a.” We’re just trying to show you that practically anything, within or outside an element, can be commented out. You can include a note in your comment for reference sake — it doesn’t change the nature of what is displayed.
Using Colors in HTML
Sooner or later, you will want to use colors to indicate certain elements of your HTML document. This can be done in three main ways: with the HEX value, with the RGB value or with the name of the color.
Using color in HTML is usually done with the style attribute.
Example 1:<p style="color:#0000FF";>This is the blue color</p>
In this example, using the HEX value for the blue color “#0000FF” we are telling the browser to show your text (in this case “This is the blue color”) using the color blue.
Example 2:<p style="color:rgb(153, 255, 153);">This is the color green</p>
This time around, we ask that the text be highlighted in the color green using the RGB value.
Example 3:<p style="color:hsl(60,100%,50%);">This is the color yellow</p>
In this example, using the HSL value, we asked that the text be highlighted in the color yellow.
Example 4:<p style="color:orange;">This is the color orange</p>
In this example, we use the HTML color name (in this case “orange” — which we highlighted in the code by italicizing it) to ask that the text be highlighted in the color orange. Obviously, this is only feasible for texts for which you know the color names and can be difficult for certain color shades that can be easily done with the HEX code or RGB value. Regardless, you can find a list of 140 HTML color names compiled by HTML Color Codes.
Understandably, you don’t have all the necessary information — such as HEX code, RGB value, etc — for all colors. Don’t panic, the color picker by W3Schools is a great tool that allows you to select any color and shows you all information about that color including the HEX code, RGB value and HSL value.
Using iFrames in HTML
In an HTML document, an iFrame (inline frame) can be used to embed a file in the current document. In essence, you can use it to display another website or content from another web page inside the current one.
With the above code, I am telling the browser to display the content of https://websitesetup.org in a frame directly inside this page.
Iframes can be used to display a website, video, images or any other form of content.
The code for this is simple:<iframe src="URL"></iframe>
(simply replace “URL” with the link to the website/content you want displayed.)
You can further customize to specify certain values, such as the height and width for example, of your iframe.
Example:<iframe src="URL" height="350px" width="400px"></iframe>
In this case we’re telling the browser to display the iframe using an height of 350px and a width of 400px.
Fonts in HTML
Understanding how fonts work is essential to creating effective HTML documents. For one, fonts make it easy to set the size of your text. It also makes it easy to set the color as well as the face (or font “type”) of your content.
To indicate the font your HTML document will be using, you will need to use the <font> tag. However, you can set the font size, the font color or the font face by using the “size”, “color” or “face” attribute.
Setting size — example:<font size = "6">Display this text using the font size 6</font>
In this example we tell the browser to display our text using the font size 6. It is important to note that the range of accepted font sizes is 1 to 7. Anything above 7 will automatically adjust to font size 7. The default font size is 3.
Font color — example:<font color = "blue">Display our text in the blue color</font>
Again, we’re using the <font> tag to ask the browser to display our text in the color blue. In this instance, we used the HTML color name (“blue”). This can be replaced with the HEX code or the RGB value if you want.
Font face — example:
Do you prefer Verdana instead of Times New Romans? This is how you set this.<font face = "Verdana">Kindly display this text in the Verdana font</font>
In this example, we are telling the browser to display our text in the Verdana font. You can simply change the font face value to indicate any font you want to use.
Alternate font faces:
It is important to note that people will only be able to see your text displayed in the font you specify if they have that font installed on their computer. If not, the default font face — usually Times New Roman — will be displayed; which is why it is highly recommended to use “web safe” fonts. In this instance, it might help to include as many alternate font faces as you can. This way, even if they don’t have your main font face, you can specify other fonts in order of importance. This is done with the use of the comma.
Back to our example:<font face = "Verdana, Helvetica, Arial, Comic Sans">Kindly display this text in the Verdana font first, or Helvetica, or Arial, or Comic Sans… in that order, if the main font is not available</font>
In essence, in the above example. We instruct the browser to show the text in Verdana. However, if Verdana is not available, instead of reverting to the default Times New Romans, it can show Helvetica, or Arial if Helvetica is not available or Comic Sans is Arial also is not available.
In conclusion, HTML is more complicated than what you have in this guide. However, if you can grasp the basic concepts in this guide, you are up to a good start. It’s like knowing the ABC of a language; everything else becomes much easier.
If you went through this tutorial with the aim to create a stunning website, we’re sorry to disappoint — it just doesn’t work that way. This is basic HTML tutorial, to help you develop a foundation you can build upon, and it takes significantly more effort — and a lot of development time often using a combination of languages, to pull that off. However, with WordPress, which we covered in great details in our guide on creating a website, you can have a stunning website ready in minutes.