At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly Ex: <!DOCTYPE html> <html> <!- - your HTML code - -> </html> You also have to say the language used on this page. Ex. <html lang=”en”> If there is two language <html lang=”en-es”> Open tags<> closing tags </> Tags, ex: <h1> … </h1> <p>…</p> etc h1, 2, 3… size of words or title (h means head) P – paragraph Between <html> and </html>, we have to add two elements: <head></head> it contains metadata – data about data Always set <meta charset=”utf-8”/> and <title> elements <meta charset=”utf-8”/> void element, indicates character encoding used for document, set as first element inside <head> <title> es importante porque si busca en Google o buscador puedes encontrar la pagina por el title. El elemento meta con atributo charset en un documento HTML está el destinado a indicar la codificación de caracteres utilizada (charset). En HTML5 tiene la sintaxis: Por ejemplo, si se utiliza la codificación UTF-8 (estándar en HTML5 reconocido por la RFC 3629 de la Internet Engineering Task Force (IETF) y una de las tres posibilidades de codificación reconocidas por Unicode): <meta charset="utf-8"> <body></body> this holds el contenido visible para el publico. How to move text: center, right on web. You have to add align=”center” to center it or replace “center” for right if want to move it right. Ex.: <p align=”center”> text </p> To leave a message to another person: <!- - - - - -> Adding image <img src=“ link where image is”> Note: you not need to close it with </…> Also, we can exchange the image size as following. <img style=”width: 181px; height: 181px” src=”link”> Number and px are the size of the image, W x H. To go to another link or website: use: a href (hyperlink) Ex.: <a href=“link of website”> word on blue </a> Note: “word on blue” it is the word that we use to make click to go on another website. How to add a link within a paragraph using a word: <p> ..text <a href=“link”> word to be linked </a> words or end </p> We add target=”” to open a new page. Ex: <p> ..text <a href=“link” target=“_blank”> word to be linked </a> words or end </p> Note: _blank means a new page, also we can say self, and it will not open a new page. Also, you can use “a href” to open an email, phone or go to a specific place on the same page. <a href=”tel:1+123-123-1234”>call</a> this will open phone app in a phone. <a href=”mailto:info@gmail.com”>email</a> this will open email <a href=”#chapter2 >chapter2</a> this will go to another place on the same page, but you must add a “id” to one element. For ex.: <section id:”chapter2”> when you make click on chapter2 word, it will go to the place where you added the id for chapter2. <ul> Unordered (ul) list vs ordered(ol) list(li) Unordered: <li>jjunior</li> </ul> Will show: Jjunior Ordered: <ol> <li>junior</li> </ol> Will show: 1. Junior If you want add letters or roman numbers make the following: <ol type=”I”> also <ol type=”I”> or <ol type=”a”> Description list <dl> / Data term <dt> Data description <dd> <dl> <dt>coffie</dt> <dd>- black hot drink</dd> </dl> Will show: coffie - black hot drink <form> </form> We used “form” to collect data from users. We can have more than one form on the same page: Input text. It is a place where to can write something. Ex. <input type=”text”> will show We can make box more bigger or smaller adding size=”#we want” Ex: <input type=“text” name=username size=”60”> Also, we can replace text for password. Password dot not show what you are writing. Ex.: <input type=”password”> Adding a placeholder text(texto marcado o sombreado) it will be in the box. <input type=“text” placeholder=“text”> Ex. Adding a submit bottom on my page: <button type=“submit”>submit</button> Also, <input type=”submit”> Select and option: Ex: <select name=“backflow”> <option value=”apollo”>Apollo</option> <option value=”combraco”>Combraco</option> <option value=”watts”>Watts</option> </select> Will show: If we want that user must fill something, we can make the following: <input type=“text” requered> (we cannot submit the form until it is completed. Textarea: using to add a lot of information. <textarea name=“comments” rows=“5” cols=“10”></textarea> Adding a line across the page: <hr> you could add this between paragraph, title, ect. Ex. <p>text</p> you will see: <hr> (horizontal rule) text <P>text</p> ____________________it’s a horizotal rule Text How to add an email <a href="mailto:secret@gmail.com">email me</a> Radio Buttons: You can use radio buttons for questions where you want the user to only give you one answer out of multiple options. Ex.: <label for="indoor"> <input id="indoor" type="radio" name="indoor-outdoor">Indoor <input id="outdoor" type="radio" name="indoor-outdoor">outdoor </label> Also: <input type="radio" name="indoor-outdoor" value="indoor" >Indoor <input type="radio" name="indoor-outdoor" value="outdoor" >outdoor Will show: Indoor (where user can select empty circle with a click on, if there is more than one, only could select one of them) Outdoor Note: the “name” must be the same, so we can select just one or the other(not both). If we add two more “radio” with difference name, we can select one of two on both radio. Checkboxes: Ex: <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label> Also: <input type=”checkbox” name=”repair” value=”yes”>Repaired <input type=”checkbox” name=”repair” value=”no”>Not Repaired Will show: Loving (where user can select empty box with a click on, with more than one, you could select more than one box). Repaired Not Repaired Single line break <br> This leave a space between lines. You could added between <p> </p> if want. Ex. <p> text. Text. Text. </p> will show text. Text. Text. <p>text. <br> text. Text.</p> will show Text. Text. Text. <strong> to add negritas <p> this is <strong>important</strong> because</p> Will show: this is important because <table> <tr>(table row> <td>(table detail or columns)<th> (table header – to add tittle on columns) We use this to make a table on webpage. Ex; <table> <tr> <th>junior</th> <th>chanel</th> <th>Jacob</th> <tr> <td>junior</td> <td>chanel</td> <td>Jacob</td> </tr> <tr> <td>junior</td> <td>chanel</td> <td>Jacob</td> </tr> </table> Will show. Junior Junior Junior chanel chanel chanel Jacob – this row is the title colums<th>table head jacob Jacob <tfoot></foot> said web that this row <tr> is the foot and go directly to bottom. <thead></foot> said web that this row <tr> is the head and go directly to top.
