HTML Essentials by Lynda – Intro

So I am spending this morning using Lynda.com to learn the basics of HTML coding.

It’s pretty good, they have tons of step by step videos, exercise files and a code writing program to practice in.

HTML or Hyper Text Markup Language

  1. HTML: Essential Structure
  2. CSS: Page Design
  3. Page Behaviour

HTML is a markup language, it uses ‘tags’ e.g. <p> = paragraph

Learning HTML syntax in 5 minutes

Starting with a .txt file with some text.

1

To make the text into a paragraph, I have added opening and closing tags with a ‘p’ for paragraph on either side of the text.

2

This is now considered a ‘paragraph element’ (referring to the tags and their content)

3

The <p> tag is actually the default element in HTML, so with or without it, it will look the same in a browser.

5 3

If I change the <p> tag to a <h1> tag, which is the boldest heading tag, you can see a difference.

3 6.jpeg


 

Tags can also have certain ‘attributes’, some are specific to the element and some are global. The paragraph tag doesn’t have any specific attributes but it does have some global ones.

‘lang’ is global and can be added into the ‘p’ tag, this attribute defines the language of the tag it has been added into. This means that webpage spell checkers know which language the text is in and whether it needs to be translated.

4

This is the syntax of the attributes. You start with the name of the attribute (lang), then you have the equals sign, then you have the value which is always contained in quotation marks (“en”)

There is basically two types of attributes. There is informative, which is this in giving extra information about the element to the browser and there is functional, so for something like a link, which is done using an anchor element.

There is a functional attribute called href. This attribute tells the browser where to go when the link is clicked.


 

You can also make more complicated structures by nesting one element inside another. This means when you open a parent tag then open a child tag, you have to close the child tag before closing the parent tag.

3 7.jpeg

8.jpeg

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s