Clilstore Facebook WA Linkedin Email
Login

This is a Clilstore unit. You can link all words to dictionaries.

UNIT 9 WEB DESIGN: ACTIVITY 1. HTML

 

Introducción a Html

Introducción HTML.







Web pages are written using HTML language. HTML is a tag language (lenguaje de etiquetas). HTML consist of a number of pairs of tags (etiquetas) which set format of the web page contents:

Usually the tags come in pairs, that is a start tag: < a tag name > followed by an end tag: s < /a tag name >

<nombre_etiqueta> ... </nombre_etiqueta>

The tag name sets a format feature for the text enclosed (encerrado por) by the start and end tag

For example  Hola esto es una <strong>prueba</strong>  de la letra negrita

In the example, the tag strong, sets the text enclosed between <strong> and </strong> , (“prueba” ) to bold font (negrita)

A Html page has two main sections: the Header and the body.



Parts of a HTML document



The image below shows the HTML code for a very simple web page:




ACTIVITY 1.1



Coming back to our first HTML, notice that there are three pairs of tags(<html>, <head>, <body>):

 

 

 

 

 

 

 

 



HTML defines 91 different tags shown bellow:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.

Some tags have also ATTRIBUTES: For example : <a href= ….> texto</a>

<a> is a tag used to define a link to another web page. The target web page is indicated using attribute href

 

 

 

 

ACTIVITY 1.1 (CONTINUES HERE)

Add the following links to the web page we are editing in the activity 1

.



<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>

TEXT FORMAT

Most contents in a web page are text. For this reason many tags are used to set up a text format format features.









By default the web browser ignores the the line breaks (saltos de línea) in the text. As shown in the image bellow, the whole text is shown by the browser in a single paragraph, in spite of been written in different lines.



 

 

 

 

 

 

 

Unless you use the tags <p> </p> to define a paragraph or the tag <br> to define a line break..

The difference between <p> </p> and <br> is:

<p> </p> force a line brek, leaving a double space between paragraphs

<br> Breaks the line without any double space between paragraphs

 

 

 

 

 

 

 

 

 

ACTIVITY 1.2



LOREM IPSUM

QUE ES LOREM IPSUM

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum,

En esta página web podemos generar de forma automática párrafos aleatorios de  texto Lore Ipsum

ALGUNOS EJEMPLOS

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Your exercise must look like this




HEADERS



In a long text, usually there is a structure of chapters, sections, articles, points, usually with a chapter title, section title, arcticle title etc. <h1>, <h2> ......<h6> define different levels of text format for the tittles. A s shown in the image, the difference between them is the font size

<body>
<h1>ENCABEZADO DE NIVEL 1</h1>
  <h2>esto es un encabezado de nivel 2</h2>
    <h3>esto es un encabezado de nivel 3</h3>
      <h4>esto es un encabezado de nivel 4</h4>
       <h5>esto es un encabezado de nivel 5</h5>   
          <h6>esto es un encabezado de nivel 6</h6>
</body>


ACTIVITY 1.2 (continued)



LISTS

A list is a set of lines with the same left indentation (sangria a la izquierda). There are two types:




<ul >
    <li>Elemento 1 de la lista</li>
    <li>Elemento 2 de la lista</li>
    <li>Elemento 3 de la lista</li>
</ul>

<ol >
    <li>Elemento 3 de la lista</li>
    <li>Elemento 1 de la lista</li>
    <li>Elemento 2 de la lista</li>
</ol>


ACTIVITY 1.2 (continuing) .

 

OTROS TEXTOS DE RELLENO

Los textos lorem Ipsum son el clásico de los textos de relleno, pero existten otras alternativas.

  •  Li europam lingues

  • Pasajes de Don Quijote

  • Kafka

  • Pangrama

  • a-z A-Z 123 

Puede ver ejemplos de todos estos textos de relleno haciendo clic aqui



TABLES

A table in HTML is a structure formed by a sequence of rows (filas), every one of them made up of a number of cells.




By default the table will be shown with no borders. Add the attribute border=x to the tag <table> where X is a number defining the border thickness



<table border=1>

ACTIVITY 1.2. (Continuing)

 

TIPO RELLENO

EJEMPLO

Li europam lingues

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot

Pasajes de Don Quijote

Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas;

Kafka

lo que le hizo sentir una gran melancolía. «Bueno -pensó-; ¿y si siguiese durmiendo un rato y me olvidase de todas estas locuras?»

Pangrama

 El cadáver de Wamba, rey godo de España, fue exhumado y trasladado en una caja de zinc que pesó un kilo.

# a-z A-Z 123

 {} abc def ghi jkl mno pqrs tuv wxyz ABC DEF GHI JKL MNO PQRS TUV WXYZ !"§ $%& /() =?* '<> #|; ²³~ @`´ ©«» ¤¼× {} abc def ghi jkl



IMAGES


To insert an image use the tag <img>, and the following attributes

<img src="/graficos/bebe1.jpg" width=140 height=210 border=0 >


This tag is not a paired tag. Don't put a </img> tag


ACTIVITY 1.2 (FINAL)


AC

 

 

 

TIVITY1.3 HTML

In this activity will work most of the concepts seen so far:

To carry out this activity you have to log in our Moodle and enter into the link ACTIVIDAD 3 INTRODUCCIÓN A HTML.




Next, click in the button attempt quizz now. There's a single question in the quizz, with instructions to build a HTMl page. The questions provide the needed plain text to make the exercise(don't type it, copy it from the question)

You'll be randomly assigned one in 25 different models made from the 4 main subjects (planets, idioms, music genres and gemstones)

Next time you enter the quizz, the button name will change to Continue quizz. It's very important the field state appears as in progress



When you finish the exercise, using gedit, select all the text in you Html file, copy it paste it in the answer panel in your quizz question. DON'T CLICK IN THE FINISH ATTEMPT BUTTON UNTIL FINISHING THE EXERCISE. Otherwise Moodle submits the work, and it won't allow you any other modification


 

   

Clilstore

Short url:   https://clilstore.eu/cs/5524