Apprentice HTML

This course was created to help beginner web designers to be able to design simple Web Applications using the HTML and CSS programming languages. 

Posted by Rishi Raj Gujadhur 1/3/2016


Table of content

1. Introduction to HTML
2. Title tag
3. Adding content 
4. HTML styling
5. Hyperlinks
6. Tables
7. More on styling
8. Adding an image
9. Ordered and unordered list
10. Applying styles using classes and Ids
11. Writting comments

 
 

1. Introduction to html

This video introduces you to HTML and explains its purpose. 
 

HyperText Markup Language, commonly referred to as HTML, is the standard markup language used to create web pages. Web browsers can read HTML files and render them into visible or audible web pages.(wikipedia)
 
 

2. Title Tag

This video covers the implementation of custom Title and creation of an HTML page using the text editor Notepad ++.
 

The html tag tells the browser that this is an HTML document. The html tag represents the root of an HTML document. The html tag is the container for all other HTML elements except for the DOCTYPE tag.
 
 

3. Adding Content

This tutorial covers how to add content to our webpage.
 

The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. (w3schools)
 
 

4. HTML Styling

This tutorial covers how to style html paragraphs tags.
 

HTML Styling
  • Every HTML element has a default style (background color is white and text color is black). 
  • Changing the default style of an HTML element, can be done with the style attribute. (w3schools)
 
 

5. Hyperlinks

This tutorial teaches you how to create hyperlinks.
 
 
  • HTML links are hyperlinks. 
  • A hyperlink is a text or an image you can click on, and jump to another document. (w3school)
 
 

 6. Tables

This tutorial teaches you how to create html Tables.
 

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells. The HTML tables are created using the table tag in which the tr tag is used to create table rows and td tag is used to create data cells. (tutorialspoint)
 
 

7. More on Styles

This tutorial teaches you how to add a background color and a custom width to some html elements.
 

HTML Styling
  • Every HTML element has a default style (background color is white and text color is black).
  • Changing the default style of an HTML element, can be done with the style attribute.(w3school)
 


8. Adding An Image

This video covers the addition of an image to an html page. Clicking the image should redirect the user to another webpage.
 

HTML Images Syntax
  • In HTML, images are defined with the img tag.
  • The img tag is empty, it contains attributes only, and does not have a closing tag.(w3school)
 
 

9. Ordered and Unordered list

This video covers how to create ordered and unordered list.
 

Unordered HTML Lists
  • An unordered list starts with the ul tag. Each list item starts with the li tag. The list items will be marked with bullets (small black circles) 

Ordered HTML Lists
  • An ordered list starts with the ol tag. Each list item starts with the li tag. 
 
 

10. Applying Styles Using Classes And Ids

This tutorial covers the application of styles using classes and ids.
 
 
  • CSS Selectors. CSS selectors allow you to select and manipulate HTML elements. CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute, and more.(w3schools)
  • The #id selector styles the element with the specified id.(w3schools)
 
 

11. Writing Comments

This tutorial covers the creation of comments and also provides an overview of this tutorial series.
 


HTML Comment Tags. Note: There is an exclamation point (!) in the opening tag, but not in the closing tag. Comments are not displayed by the browser, but they can help document your HTML.(w3schools)