Learn HTML - For Beginners

Learn how HTML communicates with browsers to control page display, including fonts, colors, graphics, and hyperlinks, by examining real page source and basic structure.

Explore the HTML head section, including the title tag, meta description, UTF-8 charset, and viewport, and see how style, CSS, and JavaScript in head influence the page.

Explore html body tag and how content such as text, links, images, and lists appears in the browser, with red text and a javascript function to convert lowercase to uppercase.

Create paragraph spacing by wrapping text in opening and closing p tags, then save and preview to see each line on its own line.

Learn to create single line breaks in HTML using the br tag instead of a paragraph, and preview the smaller gap in the browser.

Whitespace in html collapses multiple spaces into a single space. Use a tag that the browser interprets as a single space, copying it four more times to yield five spaces.

Practice using header tags to create emphasized text, titles, and headings in html, notice how h1 through h4 vary in size, and preview changes in the browser.

Learn how to format text in HTML by applying bold, italic, underline, and strike through using strong, em, u, and strike tags, with line breaks and paragraphs.

Explore inline text formatting with the font tag, applying font face, size, and color (blue) to headers, applying the aerial font, and preview the result in a browser.

Create an unordered list in an html document by adding an h3 heading, then using ul and li tags for list items, save the file, and preview in a browser.

Create an ordered list in your HTML document using the ol tag with li items to auto generate numbers, then preview in the browser.

insert images into your html document by using the image tag, specifying the src, width, and height, and explore relative versus absolute file references.

Embed video in HTML with the video element, set width and height, enable controls, provide the source and type, and note autoplay behavior and mobile limitations.

Explore absolute and relative file referencing in HTML by using the src attribute for video and image elements, comparing internal paths to external URLs and understanding path references.

Create image and text links in HTML by wrapping images with anchor tags and setting href attributes, then open links in a new window with target _blank and test them.

Learn how to create named anchors with id attributes and in-page links using anchor tags to navigate to specific articles from a table of contents on the same page.

Learn to create and structure HTML tables, define rows and cells, and apply width, border, border color, and cell padding and spacing, while comparing 100% width to fixed width behavior.

Explore nested tables by placing a table inside a parent table, and learn how width and border settings—such as 100 percent, 500 pixels, and 50 percent—shape layout.

Learn how to merge two columns in an HTML table by removing the second column in the first row and applying the colspan attribute to the first cell.

Apply a no wrap attribute to a table column, then refresh to keep long text on one line as the table expands to fit it.

Use the background attribute to apply a background image to a table with a relative file path. Place the image in the same folder as your HTML file and refresh.

Learn how to align table contents using the td align attribute, shifting values to the right, left, center, or justified to improve readability in HTML.

Build the front end of an HTML form, validate input with client-side and server-side checks, and prepare data for processing such as database storage or email transmission.

Create an employment application form in HTML by wrapping a two-column table with form tags, including text fields, select menus, checkboxes, radio buttons, text areas, and submit and reset buttons.

Compare get and post methods. Get appends data to the url and is cached or bookmarked; post places data in http body with no limits and is not cached.

Create a web form by adding a heading, labels, and two text input fields for first name and last name, with simple name attributes and a 50 character max.

Create HTML select menus with named inputs and option tags, assigning value attributes (two-character codes) for database submission, and duplicate a second select for experience level.

Create HTML forms using checkboxes for job type and radio buttons for employment status, name inputs, form groups, and preview the result in the browser.

Create a multi-line text area labeled 'additional comments' with cols and rows, including a name and closing tag, then add submit and reset buttons that post to a server-side script.

Explore embedding content with HTML iframes to run searches from multiple engines on a single page, loading ask.com and bing.com in separate iframes with src, width, height, and no-support fallback.

Build a complete HTML home page using only HTML, practice object insertion and text formatting, and develop forms and basic styling while exploring inline styles and table-based layouts.

Build a header with navigation labels inside a full-width table, then center a nested table of 547 pixels width with five columns for links styled in white H3 text.

Create a callout bar in the header that displays your website name and a phone number, using a nested two-column table with a light gray background and left- and right-aligned text.

Insert the main image into a nested table with a centered column, specify the image source from your downloads folder, and set its width and height to display correctly.

Create a nested table inside a column to display text, with a 72-pixel height, center horizontal alignment, and top vertical alignment; then attach a font attribute to style the text.

Learn to build a contact us today button and a newsletter signup form using a table-based layout, with an orange button and post-form submission to send dot BHP.

Build a three-column, two-row html table with headings, sample text, and an unordered list; apply explicit widths and bold headings, then refresh the page and finalize the footer.

Create a website footer by building a black background table with navigation labels (home, about, services, clients, contact) and a copyright line, then save and refresh to see the page.