Getting Started

HTML (HyperText Markup Language) files are text files that include tags that indicate the structure of a Web page. A Web browser reads the HTML file and interprets the elements, thus presenting the information in the way the Web designer intended.

There is a new revolution for code editors and that is totally online browser-based code editors like repl.it that we will use. The allows you to make edits to your code and see what it looks like on the fly. In olden days of yore, we had to use text editors that took a lot longer to use. We will be using repl.it as our Integrated Development Environment (IDE).

HTML5 is the current generation of html. It functions in the same manner as previous versions, but adds semantic tags, rich media and animation features and works with CSS3. XHTML (X is for extensible) was introduced in 2000, and it provided more structure and guidelines to HTML. Used in conjunction with stylesheets, XHTML separated document structure from formatting, thus allowing more flexibility in Web design.

An element (or tag) is a command written between angle brackets (the less-than and greater-than symbols).

<html>

Some elements have attributes that provide a variety of options. The attributes have associated values deemed by the designer.

Values are surrounded by quotation marks. If you happen to be copying html from another document, always be sure you aren't copying rich text quotation marks or apostrophes. They will not render correctly in the browser and are likely to cause problems in the code.

Most tags must also be closed after inserting the contained text.

<strong>Cunningham's Page</strong>

This element bolded the text "Cunningham's Page". The closing tag makes sure the rest of the text is not bolded in the document.

In HTML, elements could be written with uppercase or lowercase text and it made no difference to most major browsers. However, in XHTML, lower-cased tags were required, but code still renders regardless. It is considered consistent coding style to use lowercase for html elements in HTML5 and is the standard that most Web developers now use.

Another standard introduced by XHTML was the requirement that all elements must be closed. In most cases, you close the element after the text that you are marking up, as in the use of </strong> above. In other cases, a standalone element applies the "/" within itself to conform to the standard. See the code for breaks and images in the Basic Elements section.

Resources to search for information

No programmers memorize the entire language they are coding in.

One of the most important skills of a web developer / coder is to find information about whatever you are trying to do. There are two great resources to do this

You will always be able to find what you need for HTML or CSS related issues on those sites. If you are looking up something HTML related, simply google "mdn html _______" for you to find any info regarding that (fill in the blank) on the mdn site. Same goes for w3schools.

Page updated

Report abuse