HTML Exercises
Complete this exercise to refine your html skills
HTML………
HTML is the standard markup language for creating Web pages.
What is HTML?
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.
-
HTML basics exercises
- Create a webpage that prints your name to the screen.
- Create a webpage that prints the numbers 1 – 10 to the screen.
- Create a webpage and set its title to “This is a webpage”.
- Create a webpage that prints the message “When was this webpage created? Check page’s title for the answer.” to the screen, and set the title of the page to the current date.
- Create a webpage that prints any text of your choosing to the screen, do not include a head section in the code.
- Repeat exercise #5, but this time include a head section in the code.
HTML text exercises
- Print your name in green.
- Print the numbers 1 – 10, each number being a different color.
- Prints your name in a Tahoma font.
- Print a paragraph with 4 – 5 sentences. Each sentence should be a different font.
- Print a paragraph that is a description of a book, include the title of the book as well as its author. Names and titles should be underlined, adjectives should be italicized and bolded.
- Print your name to the screen with every letter being a different heading size.
HTML text formatting exercises
- Print the squares of the numbers 1 – 20. Each number should be on a separate line, next to it the number 2 superscripted, an equal sign and the result. (Example: 102= 100)
- Prints 10 names with a line break between each name. The list should be alphabetized, and to do this place a subscripted number next to each name based on where it will go in the alphabetized list. (Example: Alan1). Print first, the unalphabetized list with a subscript number next to each name, then the alphabetized list. Both lists should have an h1 level heading.
- Print two paragraphs that are both indented using the nbsp; command.
- Print two lists with any information you want. One list should be an ordered list, the other list should be an unordered list.
- Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the horizontal line print a paragraph relating to the text in the heading.
- Print some preformatted text of your choosing.
- Print a long quote and a short quote. Cite the author of each quote.
- Print some deleted and inserted text of your choosing.
- Print a definition list with 5 items.
- Print two addresses in the same format used on the front of envelopes (senders address in top left corner, receivers address in the center).
- Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the data that the abbreviations and acronyms represent.
HTML link exercises
- Create some links to various search engines (google, yahoo, altavista, lycos, etc).
- Create links to five different pages on five different websites that should all open in a new window.
- Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page.
- Create a page with a link at the bottom of it that when clicked will jump all the way to the top of the page.
- Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. At the bottom of the page there should be a link to jump back to the top of the page.
HTML image exercises
- Display five different images. Skip two lines between each image. Each image should have a title.
- Display an image that has a border of size 2, a width of 200, and a height of 200.
- Display an image that when clicked will link to a search engine of your choice (should be opened in a new window).
- Display an image that when clicked will link to itself and will display the image in the browser by itself.
HTML basics
- Setting a background color
- Including comments in code
- Setting the title of a document
- A simple HTML document
HTML text
- Displaying bold, italic, or underlined text
- Displaying text in different sizes using headings
- Displaying text in different fonts, sizes, and colors
- Using various text tags at once
HTML text formatting
- Abbreviations and acronyms
- Displaying text as an address
- Skipping lines in a webpage
- Using computer-output tags
- Definition lists
- Deleting and inserting text
- Creating horizontal lines
- Creating an ordered list
- Creating ordered lists
- Creating an unordered list
- Creating unordered lists
- Creating nested lists
- Displaying paragraphs
- Displaying preformatted text
- Displaying quotations
- Setting text to a subscript or superscript
- Setting text direction
HTML links
- Linking to other websites
- Linking to other directories
- Linking within the same page
- Opening links in a new window
- Linking to resources other than webpages
HTML images
- Displaying images from the same directory
- Displaying images from another directory or website
- Setting a background image
- Setting an image to different sizes
- Setting image border size
- Setting an image as a link
- Setting a title for an image
- Aligning an image with a paragraph
HTML imagemaps
- Associating an image with an imagemap
- A completed imagemap
HTML tables
- Basic HTML table
- Table celpadding
- Table cellspacing
- Table cell background color
- Table cell background image
- Table with empty cells
- Table row span and column span
- Table background color
- Table background image
- Table borders size
- Table caption
- Table cell alignment
- Table ‘frame’ attribute
- Table headings
- Table without borders
- Tags in tables
- Nested tables
HTML frames
- Horizontal frames
- Vertical frames
- Mixed frames
- Frame jumping
- Navigational frames
- Frames with no borders
- Frames not supported
- Frames not resizable
HTML forms
- Form buttons
- Form checkboxes
- Form fieldset
- Form hidden fields
- Form images
- Form password field
- Form radio buttons
- Form textarea
- Form textbox
- Submit a form
- Reset a form
- all features of Forms
HTML stylesheets
- External stylesheet
- Internal stylesheet
- Inline stylesheet
HTML meta tags
- Specifying a page author
- Specifying a page description
- Specifying a page expiration
- Specifying a page generator
- Specifying keywords for a page
- Preventing frames
- Redirecting the user from one page to another
HTML document types
- Transitional document
- Frameset document
- Strict document
HTML base
- Setting a reference point
- Opening links in a new window
HTML scripts
- Placing a script on a webpage
- Dealing with browsers that cannot execute scripts
