fromecoderdojo

Inspiring kids to be creative and have fun with the internet

CSS HTML API Game programming Algorithms JavaScript HTML/CSS
6 April 2019

Remakery HTML

by Agustin & Felipe

Table of contents

  1. Introduction
  2. HTML basics
  3. Playing time

Internet building blocks

How does the Internet works. Computers, networks, servers, websites, DNS, HTML and CSS

HTML Basics

Hyper Text Markup Language (HTML) : It’s a text file that follows a rule set to describes the blocks of the user interface. Browsers interpret it and render user interfaces accordingly.

Building blocks

<!DOCTYPE html>
<html>
	<head>
		<title>The Rolling Stones</title>
		<link type="text/css" rel="stylesheet" href="css/style.css"/>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<header>
			<img src="images/rs.png">
			<ul class="menu">
				<li class="selected">The Rolling Stones</li>
				<li><a href="members.html">Band Members</a></li>
				<li><a href="videos.html">Videos</a></li>
			</ul>
		</header>
		<article>
			<h1>The Rolling Stones</h1>
			<p><b>The Rolling Stones</b> are an English rock band formed in London in 1962.<br>
			 <a href="https://en.wikipedia.org/wiki/Mick_Jagger" target="_blank">
			 Mick Jagger</a> <i>(lead vocals, harmonica)</i>...
	    </article>
		<footer>
			<p>Copyright © 2019 <span>The Rolling Stones</span></p>
		</footer>
	</body>
</html>
<table>
    <thead>
        <th>Name</th>
        <th>Instrument</th>
        <th>Link to bio</th>
    </thead>
    <tbody>
        <tr>
            <td>Mick Jagger</td>
            <td>lead vocals, harmonica</td>
            <td><a href="https://en.wikipedia.org/wiki/Mick_Jagger" target="_blank"><img src="images/bio.png"></a></td>
        </tr>
        <tr>
            <td>Keith Richard</td>
            <td>guitars</td>
            <td><a href="https://en.wikipedia.org/wiki/Mick_Jagger" target="_blank"><img src="images/bio.png"></a></td>
        </tr>
        <tr>
            <td>Chalie Watts</td>
            <td>drums</td>
            <td><a href="https://en.wikipedia.org/wiki/Mick_Jagger" target="_blank"><img src="images/bio.png"></a></td>
        </tr>
        <tr>
            <td>Ronnie Wood</td>
            <td>guitars</td>
            <td><a href="https://en.wikipedia.org/wiki/Mick_Jagger" target="_blank"><img src="images/bio.png"></a></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">The Rolling Stones  1962 - 2019 and Rolling!</td>
        </tr>
    </tfoot>
</table>
<iframe src="https://player.vimeo.com/video/247750718" width="100%" height="480"></iframe>

Playing time

tags: html - kids