More Related Content
Similar to introduction to front-end development with github.
Similar to introduction to front-end development with github. (20)
Recently uploaded
Recently uploaded (20)
introduction to front-end development with github.
- 1. Unveiling front end development with github pages. By Abdul Salam
- 2. What is HTMl? • HTML stands for Hyper Text Markup Language • HTML is the standard markup language for creating Web pages • HTML describes the structure of a Web page • HTML consists of a series of elements • HTML elements tell the browser how to display the content • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
- 3. Default template of HTMl • <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> </body> </html> •The <!DOCTYPE html> declaration defines that this document is an HTML5 document •The <html> element is the root element of an HTML page •The <head> element contains meta information about the HTML page •The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) •The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. •The <h1> element defines a large heading •The <p> element defines a paragraph
- 4. Basic tags of HTML • <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> • <p>This is a paragraph.</p> <p>This is another paragraph.</p> • HTML Links • HTML links are defined with the <a> tag: • <a href="https://www.w3schools.com">This is a link</a>
- 5. Basic tags of HTML • HTML Images • <img src="w3schools.jpg" alt="W3Schools.com" width= "104" height="142"> • HTML Line Breaks • <br> • Horizontal line • <hr> • Pre tag • The HTML <pre> element defines preformatted text.
- 6. • <b> - Bold text • <strong> - Important text ( same like bold tag) • <i> - Italic text • <em> - Emphasized text ( it’s like I tag) • <small> - Smaller text ( make text small in size.) • <del> - Deleted text (line on text to represent deletion) • <sub> - Subscript text • <sup> - Superscript text
- 7. Comments • <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Remember to add more information here -->
- 8. Html tables • <table> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table>
- 9. HTML Lists What do you want to drink? • <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> The list items will be marked with bullets (small black circles) by default: • <ol>The list items will be marked with numbers by default: <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
- 10. HTML forms • <form style="align-items: center; margin:50px; width:50%;"> • <label for="fname">First name:</label><br> • <input type="text" id="fname" name="fname"><br><br> • <label for="lname">Last name:</label><br> • <input type="text" id="lname" name="lname"><br><br> • <input type="radio" id="javascript" name="fav_language" value="JavaScript"> • <label for="javascript">JavaScript</label><br><br> • <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> • <label for="vehicle3"> I have a boat</label> <br><br> • <input type="submit" value="Submit"> • </form>