Create websites with HTML 5 y CSS 1

LEARN HOW TO CREATE WEBSITES WITH HTML 5 Y CSS

García Ramírez Christian Agustín

Sánchez Crisóstomo Mónica

February, 2014

Keywords

HTML

CSS

SITIOS WEB - WEB SITES

Abstract

The aim of this article is to you into a really interesting discipline and gives you all the

tools you need to start. After introducing you to the basic topics you will be able to create

your own website with the simple steps here raised, and with a little practice you will

perfect your technique. We Help to students to start into the environment of web design,

the main things that they will know are the basics concepts of HTML and CSS also. they

learn how to use HTML that which is mainstay of the web and structure to this and at the

sometime content and connection between pages and CSS which is responsible to

describe how must then be show the structure of HTML in other words, to give shape

and style to your web page. We also explain some structures of columns; add

background images and formatting them, to adapt other websites links to the design of

your site and of course to define text styles. You will also know how to create the most

common web structures, use labels and most popular properties to customize your

website.

Introduction

The creation of the first website, adding a graphic interface, dates back to 1991. In its

early days, the web design was very technologically conditioned; their appearance was

reduced to simple black lines on a white background. Fortunately, today 's technology

and construction techniques for such have achieved high levels of development in

creativity and imagination , leaving behind outdated such as pictures and animated

GIFs, new methodologies structures are much more sophisticated, and continue steadily

growing and development. The progress of web pages has always gone hand in hand

with technology.

nowadays, in the world of the web there are plenty of web pages which were or are

created by people with expertise in the design of them, but: ¿What about other people

who do not have these skills ?, they can forgo building your own website. It is for this

reason that we took on the task of creating this article where we explain how to perform

and give a good style to a web page.

One of the main objectives for which it performs this work is to extend the knowledge of

the general public in the development of web pages.

Method and Materials

The first thing you should know before creating a web page:

The web hosting (web hosting English) is the service that provides Internet users to

store information, images, video, or any content accessible via the Web. The Web Host

are companies that provide space on a server to its clients. (Hostinger, 2014)

These Servers are computers like the ones at home, only bigger, more powerful and

capable of providing the user with an own Internet address. On these servers is stored

all the information from their email accounts, social networks, blogs, applications and

everything is on the Net. 1

With this service, businesses can obtain:

• Space on the Internet to promote your website

• own address with the name of the company

• Fully customized with your name and company name Post.

• File Transfer to intranets or virtual offices

• Installing personal applications like blogs, galleries, shopping carts etc..

1. For more information on the subject we suggest you visit the following link

(http://www.hostinger.es/) where you will find all the services they offer and instructions on how

to install the hosting.

Building a basic structure HTML 5

HTML5 provides basically three main features: structure, style, functionality. It is

considered the product of the combination of HTML, CSS and Javascript, these

technologies are highly dependent and act as a single unit organized under the HTML5

specification.(GAUCHAT, 2012)

HTML might seem confusing, but the amount of code you need to memorize is relatively

small. HTML 5 has added many new elements that help the browser to interpret the

structure of the page easily.

The basic HTML

First, the doctype tells the browser the content type2

Create the head

The following would be the <head>. We need to put all files you want to include, css

style sheets.

Añadir el body

2. The lang attribute is marked <html> opening is the only attribute we need to specify in HTML5. This

attribute defines the human language of the content of the document you are creating in this case is “ES”

Spanish.

Add the body

In <body> includes the contents of the page. This is the place where you need to add

the header, main content, sidebar and footer.

Add <Meta>

The <meta> tag specifies the text will be presented on the screen, we can also add

other tags as <metas> description or keywords. 3

Add title

The title tag is used to put the title of the document you are creating, normally this text is

displayed in the top bar of the browser window.

Añadir el header

3. There are several types of <meta> tag that can be included to declare general information about the

document, but this information is not shown in the browser window, it is only important for search engines

and devices that need to preview the document.

The <header> is one of the new HTML5 elements built in, is often used to house the

main image, a title and navigation. You can have several on a page.

Add <nav>

This label is designed to place navigation keypads principal.Puedes place any label

inside, although it is recommended to use <ul> lists.

Add <section>

They are used to enclose the full amount of a generic section within a document or

application code. Typically, a block of text that perfectly we could put a heading. In

addition, all content must encompassing some relevance to each other.(VEGA & VAN

DER, 2011)

All about DIV.

An HTML page is created with a series of tags that tell the browser to display and

where. The main structure element of a page is the div tag, short for 'divisor'. If we look

at a newspaper, we see that the text is grouped in columns, and pictures with the feet

also available together with a margin around.

The basic div

A div starts with just a bit of code: <div>. From this simple element, you can insert the

content you want inside or div.

Add an ID

A div can have a unique identifier to recognize any css or JavaScript to do. To apply an

ID used: <div id="IdDelDiv"> </ div> <div id="IdDelDiv"> </ div>.

Includes a class

So classes like IDs, but you can use the same for different elements, so it is easier to

style several at once. To apply a class to a div, use:

<div class="ClaseDelDiv"> </ div>.

Add Aside

Any content that is not related to the primary purpose of the page is going on aside. In a

blog, obviously aside is the sidebar information. In the home of a newspaper, you can be

the area of economic indicators.

Add footer

The <footer> typically contains links to common areas of the site as a contact, copyright

information, or address.4

4 footer represents the end of the body of our

document and is normally used to share general

information about the author or the organization

behind the project.

CSS

Cascading Style Sheets is a simple mechanism that describes how to display a

document on the screen, or how to print, or even how it will be delivered the information

in this document through a reading device. This form of description of styles gives

developers full control over the style and format of your documents.

CSS is used to style HTML and XML documents, separating content from presentation.

Styles define how to display HTML and XML elements. CSS allows Web developers to

control the style and format of multiple Web pages simultaneously. Any marked change

in style for an element in CSS affect all pages linked to that CSS in which the item is

displayed. (NAVAJAS, 2010)

Styles online

One of the simplest techniques to incorporate CSS styles to an HTML document is to

assign styles within the tags through the style attribute.5

5 Changing the style attribute with the value Font-size: 20px, This style changes the default text size to a

new size of 20 pixels.

embedded styles

A better alternative is to insert the styles in the document header and then use

references to make the corresponding HTML elements:

Set margins

You've specified the width, but not the position. With the margin-left command can set

the number of pixels from the left to the content. An alternative is to set both sides in

order to.

Add edges

The design of your site can look better with borders, and this determines one with two

pixels wide. The border color is dark green (006600) and the style is solid. Other border

options are: dots, dashes and single or double peaks.

Add a background image.

The fewer images you have loaded page faster, but a flat background color and much

text can discourage your users. Using key images you can improve your site, with the

advantage that the same image was used on every page of your site. The browser only

take it down once and saved in cache for use in the following pages. The incredible

result page without wasting time on large downloads.

Choose a color

The simplest is a plain color background. Is achieved by adding a color to the

background-color property in the body tag. Use words like red, yellow, blue, green or #

RRGGBB value.

Use a photo

It's simple to use a picture as a background image, you only have to add a line that link

CSS: background-image: url ('fondo01.jpg'), change the name to have your.

insert <link>

<link> etiquette and how to use it to insert files with CSS styles in our documents. We

use the line <link href="misestilos.css"> rel="stylesheet" we tell the browser to load the

file misestilos.css because it contains all the styles needed to present the document on

screen.

This practice was widely adopted by designers who are already working with HTML5.

The <link> tag referencing the CSS file will be inserted into each of the documents

required of those styles.

New selectors

Selectors are some more which were added or which are now considered part of CSS3

and may be useful for our designs. These switches use the symbols>, + and - to specify

the relationship between elements.

Incorporating Box-sizing

There is an additional built-in CSS property related to the structure and the traditional

box model. The box-sizing property allows us to change as occupied by an item on the

screen is calculated forcing browsers to include in the original width values

propiedadespadding border and total space.

Whenever the total area occupied by an element is calculated, the browser gets the final

value by the following formula: size + margins + + internal edges margins.

Add Border-radius

For years designers have been trying logar the effect of rounded corners on boxes of its

web pages. The process was almost always frustrating and difficult. For this reason this

property was incorporated into CSS

Result

What it is to use CSS?

The result of using or insert CSS in a HTML page is a page with as much style as it is

known CSS is used to give structure or a different and attractive to use pure HTML view.

With CSS user or administrator of the website, you can create styles Pageviews

depending on the rotation thereof, insert improvements and visual effects, which draw

the attention of visitors with no abuse and that these effects could turn our web more

slow.

Discussion

Why Use HTML5 and CSS?

As is known there are many hypertext markup languages, but not all have a simplicity

which makes the unique HTML.

Use HTML5 is going to evolve with the requirements every day asking us anywhere and

users, as the new version of HTML incorporates new elements that make the easiest

way to capture information on the website mentioned above.

Now because using a markup language and a representation at the same time, by

implementing these simple causes can create stunning pages depending on the

combination of knowledge and imagination about them having the developer.

References

GAUCHAT, J. D. (2012). El gran libro de HTML5,CSS3 Y Javascript. Barcelona: Marcombo S.A.

Hostinger, G. (2014). http://www.hostinger.es/.

LUBBERS,, P., & ALBERS, B. (2008). Pro HTML5 Programming. Apress.

NAVAJAS, O. A. (2010). Guia completa de CSS. Mexico: CC-BY-NC.

VEGA, J. F., & VAN DER, H. C. (2011). El presente de la web, HTML5, Css3 y JavaScript. España: CL Cristalas

S.A.