1. 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
3. 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.
4. 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.
5. 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.
6. 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.
7. 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.
8. 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)
9. 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>.
10. 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.
11. 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.
12. 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.
13. 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.
14. 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.
15. 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
16. 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.
17. 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.
