Learning Website Design: Session 2 – Main Concepts

December 2nd, 2009 admin Location: Raleigh, NC, Topic: Web Design | Digital Media

[private]OK, in our first session of our series “Learning website design” we looked at our favorite tools to get the job done. In this one, I will explain the main concepts of how the web works and also an introduction on how websites do their job.

HTTP – HyperText Transfer Protocol

It is important to understand what HTTP is. It stands for Hyper Text Transfer Protocol. Hypertext is the text that can be linked to other pieces of content (other text). Think of a protocol as a set of rules or directives that allow computers (browsers) to interpret a language. For example, when you extend your hand forward to another person, they “understand” that they are supposed to “shake” your hand in a gesture that means “welcome” or “hello”. That understanding is a protocol. The protocol of HyperText Markup simply defines what the rules are for a browser to be able to interpret it and display it in a human-readable way.

HTML – HyperText Markup Language

The language itself is called HTML. HyperText Markup Language. And it is composed of tags with attributes and the content itself. The tags are recognized as reserved keywords that are contained within opening and closing more than and less than brackets: for example: <html> is the html tag.

Think of the tags as those Russian doll pottery that when you open them, they have another one but smaller and then you open that one and it has another doll, but smaller and so on. The last one of those dolls has no space for anything, therefore is an “empty doll”. Well tags are written in sets. An opening and a closing tag in the form of: <tagname>content</tagname>. As you can see the ending tag differs from the opening one in that it has a forward slash at the beginning. There are however some tags that have no content, therefore, just as the dolls, they do not need an opening and closing tag set, they only use a single tag: for example the image tag, <img src=”images/image1.jpg” />

Block and Inline Elements

Understanding tags is very important in becoming a website designer. Every set of tags is one of two kinds of elements: block elements and inline elements. Block elements are those that create a new line after the closing tag. The inline elements stay without creating a new line break. An example of block element is the <p> tag (paragraph tag). An example of an inline element is the <span> tag.

Block elements can have inline elements inside of them. So for example is ok to have a span tag, which is an inline element, inside of a div tag, which is a block element. It is also ok to “nest” block elements inside of other block elements. So you can have div tags (divs) inside of divs. However you shouldn’t insert block elements inside of inline elements.

Structure of HTML

The traditional structure of an html file is as follows:

<html>
<head>
<title>Title of the Page</title>
<!--This is a comment-->
</head>
<body>
Body of the Page
</body>
</html>

So far we have covered the protocol used by websites and the language used to write them. Then we made a quick introduction to html itself and explained the concept of tags and markup. In our next session we will take a look at how browsers interpret the language and displayed it the users. I would suggest that if you have read this far, you probably want to practice by reading page’s html. When visiting any site you can take a look at the source code and start understanding tags and how they act to generate the finished product.

Until next time,

Alex_ @ merkados
http://www.merkados.com
Free Preview for Merkados Website Platform[/private]

About the Author

Alex Centeno MBA., is an international creative director and digital media strategist. Currently residing minutes away from the Research Triangle Park (RTP) - North Carolina, and with over 10 years of interactive marketing training and experience, Alex leads Merkados' international clients to maximizing their online business strategies. One of Alex's biggest strengths is his world-class capacity to effectively combine interactive marketing, digital media design and web development.

You may find further information about Alex Centeno MBA. at: and Twitter.

Sobre el Autor

Alex Centeno MBA., Es un director creativo y estratega de medios digitales reconocido internacionalmente. En la actualidad reside a tan solo minutos del Research Triangle Park (RTP) - Carolina del Norte, y con más de 10 años de entrenamiento y experiencia en marketing interactivo, Alex lidera a los clientes internacionales de Merkados™ para maximizar sus estrategias de negocios en línea. Una de las mayores fortalezas de Alex es su capacidad global de combinar de manera efectiva, mercadeo interactivo, diseño de medios digitales y desarrollo web.

Para más información sobre Alex Centeno MBA. puede visitar: y Twitter.