Chap 3: Lesson 2 start with html

• Mediawijsheid
• Middelbare school
• mavo, havo, vwo
• Leerjaar 2

Lesson 2: your own website

Goal:

- understand and use the basics of the webbuilding and structure

Bordtekening maken met netwerken

Als intro de box of the internet meenemen. 

This is the language

A website needs 3 languages to work

Structure of Html

HTML involves the use of what are known as tags. The tags indicate what kind of information should be displayed, such as normal text, title, paragraph, image, etc.

Example of a tag

<h1>This is a title</h1>

HTML involves the use of what are known as tags. The tags indicate what kind of information should be displayed, such as normal text, title, paragraph, image, etc.

Structure

An HTML file is made up of elements

For example: the title element

An element is created with: the start tag and the end tag

HTML Elementen

• <h1> is een header
• <p> is een paragraaf 
• <img> is een image
• <a> is een anchor
• <ul> is en unordered list
• <li> us een listitem
• enz.. enz..

HTML 5 Cheatsheet

https://websitesetup.org/wp-content/uploads/2014/09/html5-cheat-sheet.png

Get started

• Use of scrimba & html

Step 1

You will need: a laptop/computer. Phone does not qualify for this.

Go to scrimba.com

click on sign up in the upper right corner

use [e-mail]

and a password of your own creation

Stap 2: Nieuw scrim(document) starten 

1.look for a symbol in the right upper corner

2.click on new scrim

3. select html and then submit

If you click on preview see the window next to it appear. This is how your site will look like. 

If you want to make changes click on run before you see them in the mini browser.

Click on untitled scrim at the top left and there you can change the name of this project.

Op dit moment kun je alleen regels 1 tot 6 gebruiken. Om er in te werken klik er tussen of gebruik je de pijltjes toetsen om te komen waar je moet zijn

look the pro!

IF you like a particular site and want to understand it further you can use the shortcut ctrl+u or right mouse button and then page source /inspect.

Add the elements from this page into your own creation

Bit more clarification

HTML Elements

• <h1> is een header --> h1 till h7
• <p> is een paragraaf --> this gives an enter and a sort of paragraph title
• <ul> is en unordered list: creation of a list
• <li> is a item in the list and is below the <ul>
• <br> (no end tag) this is the enter 

Add this at you code

Add the information to your code

Tekst

Make the site with help form the lessonup

Try to make it without using the answers from the next page

Website

HTML5 code answer

Prep assignment

For next week, create a new html scrim.

In this html scrim, you will create the foundation for a site that is about your favorite topic. 

You may only use what you learned today.

Add a picture of your code from the prep website