Loading lesson path
HTML
Exercises, quizzes, examples, and short drills that reinforce html foundations.
In this chapter we will show some basic HTML examples. Don't worry if we use tags you have not learned about yet. HTML Documents All HTML documents must start with a document type declaration: <!DOCT…
Challenge: HTML Basics Test your understanding of basic HTML by completing these coding challenges.
Challenge: End Tags and Empty Elements Test your understanding of HTML elements by completing this coding challenge.
Challenge: Image Attributes Test your understanding of HTML attributes by completing this coding challenge.
Challenge: Heading Hierarchy Test your understanding of HTML headings by completing this coding challenge.
Challenge: Paragraphs, Breaks, and Preformatted Text Test your understanding of HTML paragraphs by completing this coding challenge.
Challenge: The Style Attribute Test your understanding of HTML styles by completing this coding challenge.
Challenge: Formatting Elements Test your understanding of HTML formatting by completing this coding challenge.
Challenge: Quotations and Abbreviations Test your understanding of HTML quotation elements by completing this coding challenge.
Challenge: HTML Comments Test your understanding of HTML comments by completing this coding challenge.
Challenge: Color Names Test your understanding of HTML colors by completing this coding challenge.
Challenge: Internal Style Sheet Test your understanding of HTML CSS by completing this coding challenge.
Challenge: Hyperlinks Test your understanding of HTML links by completing this coding challenge.
Challenge: Image Attributes Test your understanding of HTML images by completing this coding challenge.
Every web page should have a page title to describe the meaning of the page. The Title Element The <title> element adds a title to your page: Example <!DOCTYPE html> <html> <head> <title>HTML Tutoria…
HTML tables allow web developers to arrange data into rows and columns. Example Company Contact Country Alfreds Futterkiste Maria Anders Germany Centro comercial Moctezuma Francisco Chang Mexico Erns…
HTML tables can have borders of different styles and shapes. How To Add a Border To add a border, use the CSS border property on table, th, and td elements: Example table, th, td { border: 1px solid…
HTML tables can have cells that span over multiple rows and/or columns. NAME APRIL 2022 FIESTA HTML Table - Colspan To make a cell span over multiple columns, use the colspan attribute: Example <tabl…
Challenge: Table Structure Test your understanding of HTML tables by completing this coding challenge.
HTML lists allow web developers to group a set of related items in lists. Example An unordered HTML list: Item Item Item Item An ordered HTML list: First item Second item Third item Fourth item Unord…
Challenge: Ordered and Unordered Lists Test your understanding of HTML lists by completing this coding challenge.
Challenge: Div and Span Test your understanding of block and inline elements by completing this coding challenge.
Challenge: Div as a Container Test your understanding of the HTML div element by completing this coding challenge.
Challenge: The Class Attribute Test your understanding of the HTML class attribute by completing this coding challenge.
Challenge: The Id Attribute and Bookmarks Test your understanding of the HTML id attribute by completing this coding challenge.
Challenge: Clickable and Disabled Buttons Test your understanding of HTML buttons by completing this coding challenge.
Challenge: Embed a Page Test your understanding of HTML iframes by completing this coding challenge.
Challenge: Script and Noscript Test your understanding of the HTML script element by completing this coding challenge.
A file path describes the location of a file in a web site's folder structure. File Path Examples Path Description <img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the…
Challenge: Fix the Paths Test your understanding of HTML file paths by completing this coding challenge.
Challenge: Metadata Elements Test your understanding of the HTML head element by completing this coding challenge.
Websites often display content in multiple columns (like a magazine or a newspaper). Example Cities London Paris Tokyo London London is the capital city of England. It is the most populous city in th…
Challenge: Build a Page Layout Test your understanding of HTML layout elements by completing this coding challenge.
Challenge: Make It Responsive Test your understanding of responsive web design by completing this coding challenge.
HTML contains several elements for defining user input and computer code. Example <code> x = 5; y = 6; z = x + y; </code> HTML <kbd> For Keyboard Input The HTML <kbd> element is used to define keyboa…
Challenge: Technical Markup Test your understanding of HTML computer code elements by completing this coding challenge.
Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <di…
Challenge: Semantic Layout Test your understanding of HTML semantic elements by completing this coding challenge.
Challenge: Reserved Characters Test your understanding of HTML entities by completing this coding challenge.