1. Creating an Unordered List

Unordered list are great when you have some data that you would like to display in a list type format, but in no particular order. Items in an unordered list are displayed in a vertical list with a bullet point before each list item. A list is created by using the <UL> tag and then each list item is added by nesting <LI> tags inside of the <UL> tags. You can add as many list items as you would like by adding additional <LI> tags in between your opening and closing <UL> tags. Any text that you type between an opening and closing <LI> tag is what will actually appear as a list item on your unordered list. If I wanted to create an unordered list with three of my friend’s names, I would do:

2. Linking to an external website

How to create a hyperlink to an external website. By an “external website” I mean a website that is accross the internet such as google.com or yahoo.com. You create a hyperlink to an external website by using the <A> anchor tag. You must also add the “href” hypertext reference attribute to your <A> tag so that you can specify the full URL of the website that you would like to link to. It is very important that you have your full URL spelled perfectly or else your link will not be functional. Whatever you type between the opening and closing <A> tags is what will actually be displayed onscreen for the user to click on. Here’s an example of an external hyperlink to Google.com:

3. Linking to an internal webpage

How to create a hyperlink to an internal webpage. By an “internal webpage” I mean another page on your website. For example, you might create a hyperlink from your website’s Homepage to a Photos page. To create an internal hyperlink you still use the <A> anchor tag, and you still must use the “href” hypertext reference attribute to specify the page that you want to link to. However, instead of typing the full URL into the “href” attribute, you must enter the full filepath and filename of the HTML file you want to link to. For example, if your homepage.html file was saved on your desktop and the photos.html file that you wanted to link to was inside an “Images” folder on your desktop, then a properly formatted internal hyperlink would be like this:

4. Adding an Image to your website

How to add an image to your website using the <IMG> tag. These days websites are full of images, so it’s very important to know how to properly format your <IMG> tags so that your images will load and appear as you intended. Your <IMG> tags must also have the “src” source attribute that has the full filepath and filename of the image file that you want to display. It’s very important that your file paths and filenames are typed correctly with correct capitalization, or else your image may not display. Also, the <IMG> tag does not need a closing <IMG> tag. For example, if your html file was saved on your desktop and the TestPhoto.jpeg image file that you would like to display is saved inside a folder called “Images” also on your desktop, a properly formated <IMG> tag would be:

5. Changing the title of your website

How to change the title of your website. Changing the title of your website is important because a website’s title is one of the first, and most important, factors in determining where your website shows up in search engine results. Also, your website’s title is what will appear at the top of the page on your web browser’s tabs. To set, or change, the title of your website simply add opening and closing <TITLE> tags up in the the head section of your html file. Whatever you type in between the opening and closing <TITLE> tags will determine what your website’s title is. For example, this is how I would change my website’s title to “Andrew’s Website”:

6. Using External CSS

How to link to an External CSS file. Linking to an external CSS file is great for when you would like to create a consistent look and style across multiple web pages on your website. You can create your CSS rules in one spot and then link to it from all your different HTML files. In the future, if you would like to change something, you can simply go change it in this one external CSS file instead of needing to go make the same change in every single html file. To link to an external CSS file you use the <LINK> tag up in the head section of your HTML file. You must also add a few attributes to your <LINK> tag. First you must add the “rel” attribute and the value should be “stylesheet”, the other attribute that you need is the “href” hypertext reference attribute, and the value should be the full filepath and filename of the CSS file you would like to link to. For example, if my HTML file was saved on the desktop and the CSS file I want to link to, “MyCSS.css” was also saved on the desktop, then I would link it like this:

7. Using Internal CSS

How to use Internal CSS. Using internal CSS is great for when you would like one webpage, out of all the webpages on your website, to have a unique look or style. To use internal CSS you simply need to add the opening and closing <STYLE> tags up in the head section of your HTML file. In between the opening and closing <STYLE> tags is where you actually type your CSS code. For example, if I wanted to use internal CSS to change the text color of my <H1> header tags to red, I would type:

8. Using Inline CSS

How to use Inline CSS. Using inline CSS is great for when you want one specific HTML element to have a unique look or style but you don’t want to effect the other elements on the webpage. To use inline CSS, you need to add the “style” attribute into the opening tag of the element you want to modify. For example, if I had five different <H1> header tags on my webpage and I just wanted to change one of them to have orange text color, I would go to the opening <H1> tag of the header I want to modify, and I would change it like this:

9. Changing the bullet style of an UnOrdered List

The default bullet point style for an unordered list is “disk” which is just a black filled in circle. You can change the bullet point style with a little CSS by using the “list-style-type” property. Some values to try out are “circle” which will give you a little black circle with the center filled in white, like the letter “O”, and “square” which will give you little black filled in squares. For example, to change my unordered list bullet points to little black squares using inline CSS, I would do:

10. Using Break Rules <br> and Horizontal Rules <hr>

The <BR>, break rule, and <hr>, horizontal rule, tags are both used to break up text, or other content, onto another line, but they are slightly different. The <BR> break rule tag is essentially the same as hitting the ENTER or RETURN key on your keyboard, it just breaks up the content, moves down to a new line, and then continues to display all the content that comes after it on that new line. The <HR> horizontal rule tag is the same as the <BR> tag except it also adds a thin black line horizontally across the page and then continues with all the content that comes after it underneath this newly created horizontal line. Neither the <BR> or the <HR> tag have a closing tag. For example, if I had the following small paragraph of text, and I wanted to move the second half of it down to the next line, I would use the <BR> tag like this:

11. Using the basic text tags, <strong> and <em>, instead of<b> <i>

Using the <STRONG> and <EM> tags. The <STRONG> and <EM> tags are both used to highlight a certain portion of text that you want to stand out to the user. By default the <STRONG> tag makes text bold. It replaced the <B> tag which has been depreciated in HTML5 and is no longer recommended for use. The <STRONG> tag should be used to indicated important text. By default the <EM> tag makes text italicized, and is used to emphasize certain text. The <EM> tag has replaced the <I> tag, which is no longer recommended as of HTML5. For example, if I wanted to make the address portion of the following text bold to show it’s importance, I would do:

12. Using the<blockquote> tag

The <BLOCKQUOTE> tag is used to when you would like to add a large quotation to your webpage. The text you add in between your opening and closing <BLOCKQUOTE> tags will automatically be tabbed and indented so that it will be clear that the quote is separate from the rest of the page content. You can also add the “cite” attribute to specify a citation, where you got your quote from.

13. Using the <s> strikethrough tag and <u> underline tag

Using the <S> strike through, and the <U> underline tags. Both the <S> and <U> tags are used to add a line to a certain portion of text. The <S> strikethrough tag is usually used to “cross out” a certain section of text that is no longer factual or relevant. The <U> underline tag is often used to indicate an important section of text. For example, if the date of my party has changed and I would like to cross out the old, incorrect date, I would do the following:

14. The difference between <strong> and <b> tags

The <STRONG> and <B> tags both make text bold, so you might be wondering what the difference is. Well the answer is that the <B> bold tag has become depreciated as of HTML5. The World Wide Web Consortium no longer recommends that you use it in your HTML. The <STRONG> tag is now the prefered recommendation. The <STRONG> tag is better because, through the use of CSS, you can make the <STRONG> tag do more than just make the text bold. Perhaps you could make it change the text color and text size as well. It would be confusing if you used the <B> tag, which stands for Bold, but changed it’s function through CSS to do something besides making text bold.

15. Setting a <img> tag’s height and width

Setting an image’s height and width it very important because you want to make sure you know exactly what size each of the elements on your webpage will be so that you can properly align and position them to look nice and orderly. To set a specific height and width on an image you simply need to add the “height” and “width” attributes to your <IMG> tag and then specify the exact size in “px” pixels. For example, if I wanted to set an image called “MyCat.jpeg” to have a height of 300px and a width of 250px, I would do the following:

16. Setting the ALT text attribute for an <img> tag

The “alt” alternate text attribute on <IMG> tags is used to give a text based description of the content of the image. This alt text will only be displayed if the image file fails to load for some reason. The alt text is also used by search engines to determine the content of any images you have on your site so that they can be factored into search results. For example, if I had an image of my cat, I might set my “alt” attribute like this:

17. Using the <mark> tag to highlight text

The <MARK> tag is used to highlight content. It’s basically the digital version of using a bright yellow highlighter marker to mark an important section of text that you would like to draw the user’s eye to. To use the <MARK> tag you simply need to put the opening and closing tag around whatever text you would like to highlight. For example, if I wanted to highlight my phone number I would do the following:

18. Using the ALIGN attribute with images to get text wrapping

Images are inline elements in HTML meaning they don’t automatically start on a new line, and text can wrap around them. Because of this it’s important to be able to align our images wherever we would like them on the page. To do this we can use the “align” attribute. For example, to set my image to the right hand side of the page, I could do the following:

19. Creating a table in HTML

Tables can be used to display large amounts of data in a very clear and easy to read fashion. You start out my creating your table with the opening and closing <TABLE> tags. Next you must add as many rows as you would like by adding opening and closing <TR> table row tags inside your <TABLE> tags. Finally, you can add your individual data cells to each table row by adding opening and closing <TD> table data tags inside your <TR> tags. What you type in between your opening and closing <TD> tags is what will actually appear on your table in each cell. <TH> table header tags can be used in place of <TD> tags to add bold header labels for the top row of your table. If I wanted to create small table with two people and their ages, I would do the following:

20. Using the <figure> tag to make an image with a caption

The <FIGURE> tag can be used to surround an image tag and make it into a figure. You can then use the <FIGCAPTION> tag to add a caption to your image to make it more informative. For example, if I wanted to turn the image of my cat into a figure with a caption, I could do the following:

21. Using the HTML5 <video> Tag to embed video

HTML5 adds the ability to play video files without the use of Flash or any other plugin. First you must use opening and closing <VIDEO> tags to create a video player. Next, you must add the <SOURCE> tag inside the <VIDEO> tags. The <SOURCE> tag does not need a closing <SOURCE> tag, but you do need to include a few attributes. First you need to add the “src” source attribute to specify the full filepath and filename of the video file you want to play. Next, you need to add the “type” attribute which specifies the type of video file you’re using. For example, here is how I would play a video file called MyCat.mp4:

22. Using the HTML5 <audio> Tag to embed audio

HTML5 adds the ability to play video files without the uses of any additional plugins. First you must use the opening and closing <AUDIO> tags to create an audio player. Next, must add the <SOURCE> tag in between your <AUDIO> tags. The <SOURCE> tag does not have a closing <SOURCE> tag, but you do need a few attributes. First, you need the “src” attribute to specify the full filepath and filename of the audio file you’re using. Next, you need to add the “type” attribute to specify the type of audio file you are using. For example, here is how I would go about playing a wav file called “MySong.wav”:

23. Making an image a clickable hyperlink

To make an image function as a hyperlink, you simply need to place your <IMG> tag in between the opening and closing <A> tags of your hyperlink. For example, if I wanted to turn a picture of my cat into a hyperlink to Petco.com, I would do the following:

24. Adding a border to an image

To add a border around an image, you just need to add a little bit of CSS using the “border” property. For example, if I wanted to add a 5 pixel wide black border around a picture of my cat, I would do the following with inline CSS:

25. Adding white space around an image

To add some white space around an image, you just need to add a little bit of CSS using the “margin” property. For example, if I wanted to add 20 pixels of whitespace to the top and bottom of my image, and 35 pixels of space to the left and right of my image, I would do the following:

26. Setting a background color for your webpage

To change the background color of a website, you simply need to add a little bit of CSS and use the “background-color” property with the <BODY> tag as your selector. For example, if I wanted to make the background color of my webpage purple, I would use some inline CSS to do the following:

27. Using the PLACEHOLDER attribute on forms to set greyed out placeholder text

In html forms the “placeholder” attribute can be used to set the greyed out text that appears within text boxes to prompt the user for specific information. Using this placeholder text can make your forms much more clear and easy to understand. For example, if I want add some placeholder text to my textbox that tells the user the format I would like them to enter their phone number as, I would do the following:

28. Using Comments in HTML code

Code comments are important in any programming language, and HTML is no different. Code comments are little notes that never show up on your website and are only visible to other developers that might go in and look at your code. Comments are useful for explaining complex portions of code, and also for leaving yourself little notes about things that you might be adding or modifying at a later date. In HTML, you start a code comment by typing <!– then you can type as much as you would like for the text of your comment, and when you’re done you can end your comment with –> For example, if I wanted to add a comment about where I will be adding photos in the future, I would do:

29. Set a background image for your webpage

To set a background image for your webpage you just need to use a little CSS and the “background-image” property. For the value of the “background-image” property you need to specify the full filepath and filename of the image you would like to use. This filename is entered inside of url(“FILE NAME HERE”). For example, if I wanted to use a picture of my cat as my website’s background, I would do the following:

30. Make a background image fixed so it doesn’t move when the user scrolls down

If you have an image set as the background of your site, but you would like the image to stay fixed in one spot instead of moving with the page when you scroll down, you need to use CSS and the “background-attachment” property. For example, if I wanted to have the background image of my cat fixed in one spot, I would do:

31. Using the ROWSPAN and COLSPAN attributes on <TD> tags in tables

When working with tables, you can use the “rowspan” and “colspan” attributes to specify how large you would like to be a <TD> table data cell to be. For example, if I wanted a <TD> table data cell to be 2 rows high and 3 columns wide, I would do:

32. Using the different header tags <H1>-<H6>

Headers are very useful for labeling different sections of content on your websites. HTML has six different built in header sizes, H1, H2, H3, H4, H5, and H6. <H1> is the largest size header and <H6> is the smallest. If I wanted to make a large header for the photos page of my website, I would do:

33. using the <sub> and <sup> tags

The <SUB> subscript and <SUP> superscript tags are used to add small text above or below the normal text. For example, subscripts are used when writing chemical equations like in H2O. Superscripts are used for things like listing finishing positions in a race, 1st. To make a superscript like that one, I would do:

34. Making an Ordered List

Ordered lists are great for when you have some data to display that has a fixed order, like the finishing results for a road race. By default, an ordered list will label the first item “1.” and then count up from there with each additional list item. To create an ordered list you start by using the opening and closing <OL> ordered list tags. Next, you add as many opening and closing <LI> list item tags as you would like in between your two <OL> tags. Finally, whatever you type in between each pair of <LI> tags will be what actually appears on screen for each list item. For example, if I wanted to create a small ordered list that shows the top 3 finishers in a race, I would do:

35.Turning AUTOCOMPLETE off for an INPUT in forms

Many modern browsers have autocomplete features that attempt to automatically fill in a user’s information when the are on a website with forms. This can save a lot of time, but it can also be annoying when it incorrectly fills in information. Because of this, it’s great to know how to disable autocomplete on your websites. To disable autocomplete you just need to use the “autocomplete” attribute on an input tag. For example if I wanted to disable autocomplete on my little one textbox for here, I would do the following:

36. Changing the numbering style for an ordered list

By default, ordered lists use normal digits to count up the list items (1., 2., 3., 4., etc.). However, you can change the numbering style by using a little CSS and the “list-style-type” property. There are several different options available such as upper and lower case lettering starting with “A”, decimal numbers, and also upper and lower case roman numerals. For example, if I wanted to change my ordered list’s numbering to uppercase roman numerals I would do:

37. Change the text color for hyperlinks

By default a hyperlink that has not been clicked yet is blue. To change the link color you must use a little bit of CSS like you see here:

38. Change the text color for visited hyperlinks

By default a hyperlink that has already been clicked is purple. To change this color, you must use a little bit of CSS. For example, if I wanted to change the color of a visited link to yellow, I would do:

39. Change hover link color (when the user hovers their mouse over the link)

To change the color of a link when the user hovers their mouse over a link but does not click it, you need to first define the colors for an unvisited and visited link (as we did in #37 and #38 on this list). After those colors have been defined, you can set the color of an hoover link like this:

40. Make a hyperlink open into a new window rather than the current window

To make your links open up in a new tab instead of the current tab, you need to add the “target” attribute to your <A> tag. For the value of this “target” attribute you must use “_blank”. If I wanted to create a hyperlink to Google.com in a new tab, I would do this:

41. Make a hyperlink that isn’t underlined

By default all hyperlinks are blue with an underline. If you would like to remove the underline from your hyperlinks you must use the CSS property, “text-decoration”. For example, to remove the underline from all my links I could do:

42. Turn an image into multiple links based on where you click it

If you would like to have an image that contains multiple different hyperlinks based on what portion of the image you click, you first need to add your image with the <IMG> tag. Next you need to add the “usemap” attribute to the <IMG> tag and give your map a name with a # in front of it. After that, you need to use the opening and closing <MAP> tags with the “name” attribute. The “name” attribute’s value should be the name you gave for your map (without the #). Finally, in between your opening and closing <MAP> tags, you need to add <AREA> tags which will define the different clickable areas on the image. The <AREA> tags need a few attributes. First they need the “shape” attribute where you can specify the type of shape you want the area to be (rect, circle, etc.). The next attribute that’s necessary is the “coords” attribute which will require pixel coordinates for each of the vertices of your shape. Finally, you will need to add the “href” hypertext reference attribute to each <AREA> tag where you will specify the URL of the site you want the hyperlink to lead to. For example, here is how I would go about spliting a picture of my cat into two different links:

43. Using <A> anchor tags to link to a different place on the same page

Most of the time we have been using the <A> anchor tag to create a hyperlink to another web page, either internal or external. However, the <A> tag can also be used to link another part of the same page. To do this you first need to use the “id” attribute to set a bookmark somewhere on your webpage. You can add this “id” attribute to pretty much any html tag on your page. Once you have done that, you simply create a hyperlink with the <A> tag and then for the value of the “href” attribute, you just use the name of the “id” that you want to link to with a “#” in front of it. For example, if I wanted a hyperlink that took the user down to paragraph of text, I would do:

44. Creating a hyperlink to an email address

The <A> anchor tag can also be used to create a link that will open you user’s email client and prepare it to send an email. To do this you simply need to create a hyperlink as usual, but instead of typing a URL into the “href” attribute’s value, you need to type “mailto:EMAIL ADDRESS HERE”. For example, if I wanted to create a hyperlink that opens the user’s email client and prepares to send an email to my email address I would do:

45. Input type DATE

If you’re working with HTML forms, and you would like to get a specific date (day/month/year) from your users, then you should use inputs of type “date”. Using a “date” type input will give the user a nice datepicker that they can use to easily select a specific date.

46. Input type MONTH

If you’re working with HTML forms, and you would like to get a specific month (month/year) from your users, then you should use inputs of type “month”. Using a “month” type input will give the user a very convenient picker to select a specific month and year.

47. Input type WEEK

If you’re working with HTML forms, and you would like to get a specific week (week #/year) from your users, then you should use inputs of type “week”. Using a “week” type input will give the user a nice picker to choose a specific week # and year. For example, if I choose the January 2nd 1998, then it would give the value “Week 1, 1998” because it’s the first week of the year in 1998.

48. Input type TIME

If you’re working with HTML forms, and you would like to get a specific time (Hours:Minutes AM/PM) from your users, then you should use inputs of type “time”. Using a “time” type input will give the user a nice picker to choose a specific time, down to the minute.

49. Input type DATETIME-LOCAL

If you’re working with HTML forms, and you would like to get a specific date and time (Day/Month/Year Hours:Minutes AM/PM) from your users, then you should use inputs of type “datetime-local”. Using a “datetime-local” type input will give the user a nice picker to choose a specific date and time, down to the minute.

50. New HTML5 Input type SEARCH

If you’re working with HTML forms, and you would like to have a textbox for searches, then you should use inputs of type “search”. Using a “search” type input will give the user a textbox that they can type a search query in.

51. New HTML5 Input type EMAIL (for Entering email addresses)

If you’re working with HTML forms, and you would like to have your users enter an email address, then you should use inputs of type “email”. Using a “email” type input will give the user a textbox that they can type their email address into. Also, if the user has autocomplete enabled, inputs of type “email” will be automatically filled in with the user’s address. Certain browsers may also attempt to automatically add “.com” at the end to save the user some time.

52. New HTML5 Input type URL (for entering website urls)

If you’re working with HTML forms, and you would like to have your users enter a website address, then you should use inputs of type “url”. Using a “url” type input will give the user a textbox that they can type their website into. Also, if the user has their personal website saved into their autocomplete, this text box will get filled automatically and save them some time. Certain browsers may also autocomplete with “.com” at the end.

53. New HTML5 Input type NUMBER (number picker with up/down arrows)

If you’re working with HTML forms, and you would like to have your users enter a specific number, then you should use inputs of type “number”. This will give the user a convenient little numberpicker so that they can select whatever number they would like.

54. New HTML5 Input type RANGE (give a range slider)

If you’re working with HTML forms, and you would like to have your users select a number within a certain range, then you should use inputs of type “range”. When using inputs of type “range” you also should specify the minimum and maximum bounds of the range. This will give your user a nice slider that they can use to select a value in the range. For example, if I wanted to give my users a slider to choose a value between 0-100, I would do:

55. New HTML5 Input type color (gives you a color picker)

If you’re working with HTML forms, and you would like to have your users select a specific color, then you should use inputs of type “color”. This will give your users a little rectangle that shows their currently selected color (black by default). If the user clicks this little rectangle, they will get a very nice color picker that they can use to select any color they desire.

Leave a Reply

Your email address will not be published. Required fields are marked *