Estructura de Una Pagina

Enter HTML5 structural elements
The HTML4 way of doing things is all well and good, but semantically it could be so much
better:
 Humans can tell the different content apart, but machines can't — the browser doesn't see
the different divs as header, footer, etc. It sees them as different divs. Wouldn't it be more
useful if browsers and screen readers were able to explicitly identify say, the navigation
menu so a visually impaired user could find it more easily, or the different news items on a
bunch of blogs so they could be easily syndicated in an RSS feed without any extra
programming?
 Even if you do use extra code to solve some of these problems, you can still only do it
reliably for your web sites, as different web developers will use different class and ID
names, especially when you consider the international audience — different web
developers in different countries will use different languages to write their class and id
names.
It therefore makes a lot of sense to define a consistent set of elements for everyone to use for
the common structural blocks that appear on so many web sites, and this is exactly what is
defined in HTML5.
The new HTML5 elements we will cover in this article are:
 <header>: Used to contain the header content of a site.

 <footer>: Contains the footer content of a site.
 <nav>: Contains the navigation menu, or other navigation functionality for the page.
 <article>: Contains a standalone piece of content that would make sense if syndicated
as an RSS item, for example a news item.
 <section>: Used to either group different articles into different purposes or subjects, or to
define the different sections of a single article.
 <aside>: Defines a block of content that is related to the main content around it, but not
central to the flow of it.
we will discuss these in more detail a little later on, but for now, let's look at how our example
could look when structured using HTML5 elements:
For example, in unordered lists, li elements are nested inside the ul.
<ul> <li>First item</li> <li>Second item</li> </ul>
Web developers refer to the enclosing element as the parent element and the
enclosed elements as children.
Referring to HTML elements as parents and children may sound funny, but it's a
core web development concept. The web browser also knows about these
parent/child relationships, which will be important as we explore CSS in the next
lesson.
1. <html>...</html>: The root of the HTML document and parent of all other HTML
elements on the webpage.
2. <head>...</head>: Enclose other metadata about the site, such as its title.
3. <title>...</title>: Contains the site's title, which is one way users can find your site
through a search engine, like Google.
4. <meta charset="utf-8"/>: Tells the web browser which character set to use. In this case,
the character set is "utf-8".
<link rel="stylesheet" type="text/css" href="main.css"/>
About link:
1. The link element uses three attributes:
-rel: Specifies the relationship between the current file and the file being
linked to: in this case, the rel attribute is "stylesheet".
-type: Specifies the type of file linked to.
-href: Provides the URL of the file being linked to.
CSS
algunos de los atributos:
 font-size: ;
 color:;
 font-size: 32px;
 padding: 250px 0;
 margin: 30px;
 text-align: center;
 width: 100%;
 text-decoration: none;
 font-family: 'Trebuchet MS';
Color puede nombrarse o como codigo “hex”. HEX color provide millions of different
shades of colors. Ejemplo:
 #2e69a3
 #d8dabe
 #dabece
 #799575
Tambien hay RGB para crear colores:
HEX RGB
#2e69a3 rgb(46,105,163)
#d8dabe rgb(216,218,190)
#dabece rgb(218,190,206)
#799575 rgb(121,149,117)
Para seleccionar un color o imagen de fondo en el CSS.

.hero {
font-family: 'Trebuchet MS', Helvetica, sans-serif;
margin: 30px;
padding: 250px 0;
background-image: url("https://s3.amazonaws.com/codecademy-content/projects/make-a-
website/lesson-2/bg.jpg");
background-size: cover;
color: #ffffff;
About using id:
1. An id attribute can only be used once because the id is unique to the element it is assigned
to.
2. Ids have greater specificity than classes. If an HTML element is using both id and class
attributes, the CSS rule for the id will take precedence over that of the class.
Below we will use an id selector to style a single HTML element differently than
others of that kind on the webpage.
WEB CONCEPTS
 CSS: Language used to style websites. Colors, fonts, and page layouts for a site are
managed using CSS.
 CSS Selectors: specifies exactly which HTML elements to style
o class selectors: used to target classes of HTML elements
o id selectors: used to style an HTML element which has an id attribute.
 External Stylesheet: CSS file that styles an HTML file externally via the HTML link
element.

CSS PROPERTIES
 font-family: sets font for a CSS selector.

 color: sets font color for the CSS selector.
 font-size: sets font size for text.
 background-image: sets a background image of your choosing for a given selecto
CSS Maqueteo
Observe the CSS box model diagram to the right:
content: Includes text, images, or other media contained within an HTML element.
padding: The space between the content and the border. You can think of this like inner
space.
border: The outline of an HTML page element. You can think of it like a picture frame that
contains the element.
margin: The space between the HTML page element and the next nearest element(s).
Herramienta para posisionar:
display: flex;
vertical-align: middle;
justify-content: center;
position: relative/ top, left,bottom, and right
top: 2px;
The CSS position property enables you to position HTML elements in exact
locations on a webpage. One useful value for this property is relative. This value
positions page elements on a webpage relative to where they would normally
appear.
By first setting position: relative;, you can then use the CSS
properties top, left,bottom, and right to shift an element away from where it would
have normally appeared on the page.
CSS
display: inline; ------->aparecen los elementos de un grupo en linea (horizontal)
class en HTML ------ .”nombre” en CSS

id en HTML ------ #”nombre” en CSS
Bootstrap
Bootstrap is a popular CSS framework withprewritten CSS rules designed to help you build
webpages faster.
Toggle the web browser's width again to notice the following changes:
1. Navbar items change position based on the webpage's width.
2. The "Homemade Goods" text is now centered.
3. "Kitchen", "woodwork", "antique" and "gifts" photographs are arranged two per row when
the webpage is full-width.
4. Social media icons appear organized and change position at full and narrow widths.
Bootstrap's grid is responsible for this screen-width responsiveness. Click Next to

learn more!
Se agrega el commando en <head>:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
Bootstrap's grid
Como agregar un boton a otro link:
<a class="btn btn-primary" href="#" role="button">See all</a>
New Semantic Elements in HTML5

Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer">
to indicate navigation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web

page:
 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>
JavaScript
1. String: Any grouping of words or numbers surrounded by single quotes: ' ... ' or
double quotes " ... ".
2. Number: Any number, including numbers with decimals, without
quotes: 4, 8, 1516, 23.42.
3. Boolean: This is always one of two words. Either true or false, with no quotations.
Let's review: a string is any grouping of words, a number's a number, and a boolean
is a ghostly halloween costume. Or no, that's false! It's either true or false.
var myString = 'Jon';

var myNumber = 42;
var myBoolean = true;
// Do not edit the code under this line

console.log("Name: " + myString);
console.log("Lucky Number: " + myNumber);
console.log("Good joke? " + myBoolean);
“console.log()”  instrucciones y operaciones matematicas básicas

Obtener numero cualquiera del 0 al 100 -console.log(Math.floor(Math.random() *
100));
Comentarios
// para 1 solo comentario
/* y termino con */ para múltiples comentarios
Funciones condicionales en JS:
var harryPotterFan = false;

if (harryPotterFan) {
console.log('Mischief managed');
} else {
console.log('I lead a muggle\'s life');
}
var hungerLevel = 5;
if (hungerLevel > 7) {
console.log('Time to eat!');
} else {
console.log('Let\'s eat later');
}
Función
function takeOrder(topping){
console.log('Order: pizza topped with '+topping);
}
takeOrder("bacon")

Estructura de Una Pagina

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Estructura de Una Pagina

Transféré par

Droits d'auteur :

Formats disponibles

Enter HTML5 structural elements

The new HTML5 elements we will cover in this article are:

 <header>: Used to contain the header content of a site.

<ul> <li>First item</li> <li>Second item</li> </ul>

1. The link element uses three attributes:

-type: Specifies the type of file linked to.

-href: Provides the URL of the file being linked to.

Para seleccionar un color o imagen de fondo en el CSS.

About using id:

 font-family: sets font for a CSS selector.

Observe the CSS box model diagram to the right:

display: inline; ------->aparecen los elementos de un grupo en linea (horizontal)

class en HTML ------ .”nombre” en CSS

1. Navbar items change position based on the webpage's width.

2. The "Homemade Goods" text is now centered.

Bootstrap's grid is responsible for this screen-width responsiveness. Click Next to

Se agrega el commando en <head>:

<a class="btn btn-primary" href="#" role="button">See all</a>

New Semantic Elements in HTML5

HTML5 offers new semantic elements to define different parts of a web

var myString = 'Jon';

// Do not edit the code under this line

“console.log()”  instrucciones y operaciones matematicas básicas

Funciones condicionales en JS:

var harryPotterFan = false;

Vous aimerez peut-être aussi