header background
Educational IT course online

Basic Elements of a Web Page

Basic Elements of a Web Page

2 weeks
Level 1
16 video lessons
task workbook
exam
  • Theoretical lesson
  • Practical lesson
  • Course program

LESSON 1. What is HTML?

LESSON 2. Create a web page

LESSON 1. What is HTML?

  1. Relation between hypertext and HTML
  2. HTML tags
  3. HTML attributes

LESSON 2. Create a web page

  1. Workspace organization in VS Code
  2. Basic HTML structure
  3. Development of a web page

LESSON 3. Why use semantic markup?

  1. Semantics definition
  2. Semantics in HTML
  3. Impact of semantic markup on search engine work

LESSON 4. Debug a web page

  1. Debugging definition
  2. Developer tools in browsers
  3. Searching and fixing errors on a web page

LESSON 5. How to mark up text?

  1. Text markup definition
  2. Markup of headings
  3. Markup of paragraphs and line breaks
  4. Markup of quotes
  5. Markup of important text and bold text
  6. Markup of emotional text and italic text
  7. Markup of hyperlinks and underlined text

LESSON 6. Add text to a web page

  1. Workspace organization in VS Code
  2. Markup of text structures
  3. Checking text markup with a validator

LESSON 7. How to mark up lists in HTML?

  1. List definition
  2. List types in HTML
  3. List types by nesting

LESSON 8. Add a list to a web page

  1. Workspace organization in VS Code
  2. Markup of ordered list
  3. Markup of unordered list
  4. Markup of a description list

LESSON 9. How to markup a table in HTML?

  1. Table definition
  2. Markup of a simple table
  3. Grouping content in a table

LESSON 10. Add a table to a web page

  1. Workspace organization in VS Code
  2. Markup of the main table structure
  3. Markup of nested table structures
  4. Filling tables with content

LESSON 11. How to mark up an image in HTML?

  1. Image definition
  2. Image features
  3. Markup of images

LESSON 12. Add an image to a web page

  1. Workspace organization in VS Code
  2. Markup of an image located on the Internet
  3. Markup of an image located in the project folder
  4. Markup of an image located in images folder

LESSON 13. How to mark up a hyperlink in HTML?

  1. Hyperlink definition
  2. Hyperlink structure
  3. Hyperlink types
  4. Markup of different hyperlink types

LESSON 14. Add a hyperlink to a web page

  1. Workspace organization in VS Code
  2. Markup of local hyperlinks
  3. Markup of remote hyperlinks

LESSON 15. How to mak up a form in HTML?

  1. Form definition
  2. Form examples
  3. Form elements

LESSON 16. Add a form to a web page

  1. Workspace organization in VS Code
  2. Markup of form elements
  3. Setting attributes for form elements