intern_basic_html.md - brainchildservices/curriculum GitHub Wiki

Slide 1

HTML BASICS

INTRODUCTION

  • HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content.
  • For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
  • HTML is a markup language that defines the structure of your content.
  • HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.
  • The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

Slide 2

USING CODEPEN OR JSFIDDLE TRY TO DO BELOW TASKS.

INTRODUCTION TO HTML ELEMENTS

An HTML element is defined by a start tag, some content, and an end tag.

FIRST_ELEMENT

Slide 3

The main parts of our element are as follows:

  • The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
  • The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
  • The content: This is the content of the element, which in this case, is just text.
  • The element: The opening tag, the closing tag, and the content together comprise the element.

Slide 4

Elements can also have attributes that look like the following:

grumpy-cat-attribute-small

  • Here, class is the attribute name and editor-note is the attribute value.
  • The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things.

Slide 5

TASK TO DO:

  1. "Name is cool": add this content to a 'h1 tag' (replace Name with your name)
  2. Add a simple self introduction of yours to a 'p tag' .
  • ADD IMAGE TO YOUR WEBSITE
  • MAKE DIFFERENT LINKS USING ANCHOR ELEMENT
  • INTRODUCTION TO ORDERED LIST AND UNORDERED LIST
  • INTRODUCTION TO FORM ELEMENT

Visit To Learn more About HTML

MAJOR TASKS: