Web programming 1 Html Subscribe Pub Share

Let's start the Hacker Factory series on programming with creating websites.

What is in a web page?

There are three main parts to a web page: the content (or HTML), the style (or CSS) and the code (or JS) - we will master them one by one.

The content of a webpage, the stuff that's there is usually the most important stuff on a page. The content is described in a language called HTML and is a markup language: it is really a set of instructions interpreted by a browser to display a web page. It contains elements (like text, links or pictures) and instructions on how to put them together.

Here is an example:

Hacker Factory

Click Run to see it run, or Play to test some of your own ideas.

When you click run, the browser you're looking at is instructed to display the page with the content "Hacker Factory" in that box above. Since this content does not contain any special HTML instructions, it is displayed just like that.

Go ahead and play with the html box in the play area...

By the way, HTML stands for HyperText Markup Language - we'll figure out exactly what that means a bit later.

Markup

The idea of a markup language is to mark up the content, to instruct the browser what to do with the content. For instance, we can markup the content to be bold or italic:

<b>bold text</b> and <i>italic text</i>

You can see the markup is done by inserting what's called tags at the beginning and the end of the section we're marking, like <b> and </b> to mark a text as bold.

Homework

Click play above and play with it, i.e. type a few paragraphs, get a feel for it.

Continue to Web programming 2 style and CSS. If you are anxious to learn Html quickly, that's following in Web programming 3 Html content tags - you can jump there and then come back to the style.


Was this useful?    

By: Razie | 2014-05-21 .. 2016-11-08 | Tags: post , html , lesson , hacker.factory


See more in: Cool Scala Subscribe

Viewed 1157 times ( | History | Print ) this page.

You need to log in to post a comment!