webdev-basics/1-web-and-html.md

# Web & HTML

1. Websites and The Internet

A short overview of the Internet and WWW

Anatomy of a website (or web app)

HTML, CSS, JS

2. HTML basics

Setting up

tags: p, h1, img src, a href, div

boilerplate

3. Chrome Dev Tools

4. HTML continued

Title, span, text-align, br..

User input

Tables

5. CSS basics

Websites and the Internet

# A short overview of the Internet and WWW

© Buutti Oy, All Rights Reserved

# What is the Internet?

* Web != the Internet
* Internet: connected networks that use the TCP/IP protocol
  * made out of billions of computers, cables and antennae directing data to the right direction.
* World Wide Web: URL-based information system.
  * a big part of the Internet but it consists of other kinds of traffic, too:
    * Email
    * VoIP (Skype/Teamspeak)
    * File transfers between computers
    * remote connections to other computers
* In other words, the internet is an infrastructure and WWW
* is served via it

![](imgs/1-web-and-html_0.png)

# What is the Web?

* World wide web (www) is the part of the Internet where browsers fetch and show websites
  * Browsers ( _rendering engine_  in parentheses)
    * Chrome (Blink)
    * Firefox (Gecko)
    * Edge (Blink)
    * Safari (WebKit)
* WWW makes sites and applications accessible to all kinds of devices:
  * mobile phones, computers, smart watches, TVs...
  * For the websites to appear on all the different devices similarly, we need strict rules

![](imgs/1-web-and-html_1.png)

![](imgs/1-web-and-html_2.png)

![](imgs/1-web-and-html_3.png)

![](imgs/1-web-and-html_4.png)

# Back-end vs Front-end

* Web development is split into  _Back-end_  and  _Front-end_
* Front-end is the website users can actually see
  * visual elements of a website or app the user can interact with
* Back-end is the invisible part
  * "server side" where user's data is stored
  * back-end is not interacted with directly, but gives and modifies its stored data based on user requests
* _Full stack development_  refers to working on both back-end and front-end!

# What is a server or "the Cloud"

* A Server or "the cloud" is just another computer
  * server software is constantly running
  * Your own computer could be a server!
* If you need to save an image, post a comment on a news website, or just load a website, you send a  _request _ to a server
* Server then gives an appropriate  _response_  based on the request

![](imgs/1-web-and-html_5.png)

# Backend

![](imgs/1-web-and-html_6.png)

* Backend handles e.g.,
  * saving and fetching user data from a  _database_
  * user authentication and connecting multiple users together (chat apps!)
* Databases are used with  _query languages_  like  _SQL_
* Back-end software can be written with various different programming languages
  * even with JavaScript! See:  [Express](https://expressjs.com/)
* Simple websites don't require a dedicated back-end

![](imgs/1-web-and-html_7.png)

# Anatomy of a website
HTML, CSS and JS

# Anatomy of a website

* Historically, websites looked something like this
  * [https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/](https://web.archive.org/web/19970129232848/http://www.iltalehti.fi/)
* Nowadays, a website can even be a full-blown application!
  * [https://open.spotify.com/](https://open.spotify.com/)
* old and new sites alike are written in  _HTML_  __, __ which describes the  _structure _ of the site
* In mid-90s, plain HTML was extended with  _CSS_  _ _ to implement  _styling_
* The third building block of a website is JavaScript, or  _JS,_  which is used to add  _interactivity_

# HTML

![](imgs/1-web-and-html_8.png)

HTML stands for  _Hypertext markup language_

HTML defines the structure of a website

It tells what text, images and containers the website has

You might have seen raw html if your browser has failed due to a slow connection ->

[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)

# CSS

CSS stands for  _Cascading style sheets_

CSS defines the  __look __ of the website

It tells what sizes, colors and where everything is

[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

![](imgs/1-web-and-html_9.png)

# JavaScript

With a dedicated programming language, JavaScript, your website can become interactive

It allows you to do computations, send data to a server or fetch new data in real time

![](imgs/1-web-and-html_10.png)

![](imgs/1-web-and-html_11.png)

# HTML basics

# Setting up
tags 
p, h1, img src, a href, div
boilerplate

Open the  __Visual Studio Code__  code editor.

Create a new file called  __index.html__

This is a standard naming convention: servers generally first look for index.html when someone requests a web page

This file gets then sent to the client (the browser)

HTML document is constructed by using <tags>. They have either…

a) an opening and closing tag:  	<tag> stuff goes here </tag>

b) a single self closing tag: 		<tag />

Both examples above constitute an  __HTML element__

* A  _paragraph _ is made by using the <p> tags
* It looks like this:
  * <p>Hello World</p>
* The paragraph is a common html element and it is used to display text written between the opening and closing tags
* _Headings_  are larger text elements and are used as titles
  * <h1>This is a title</h1>
* There are six different sized headers ranging from __ __  __h1 __ to __ __  __h6__
  * __h1 is the largest, h6 the smallest__
* An  _image element_  doesn't have any content inside
  * thus, it's a self closing tag:
  * <img src=" [https://www.website.com/image.png"](https://www.website.com/image.png%22/)  _/_ >
* src ("source") is an  _attribute_ , and its value tells where the shown image is located
* If you want to use a local image you can put it in the same folder as the __ __  _index.html_  _ _ and load it as src="my_image.png"
  * Subfolders work, too: src="images/my_image.png"
* A link to other (remote or local) sites is added with the  _link tag_
* Tag for a link is <a> for anchor.
* The link will itself be as a href attribute standing for hypertext reference.
* Remote link:
  * <a href="https://www.google.com">This links to Google!</a>
* Local link:
  * <a href="test.html">This links to test.html!</a>
* _Divisors _ are containers we can hold our text and images in
  * made using <div> tags
* Let's put our h1, p and img elements in a div like this:
* <body>
* <div>
* <h1>My new cat!</h1>
* <p>it's name is Whiskers</p>
* <img src="https://www.imageurl.com/image.png"/>
* </div>
* </body>
* We don't need to  _style_  it yet, it's done with CSS

![](imgs/1-web-and-html_12.png)

---

https://images.unsplash.com/photo-1516750105099-4b8a83e217ee?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=640&q=426

# Boilerplate
aka: 
the stuff you have to write
before getting to 
the stuff you want to write

© Buutti Oy, All Rights Reserved

<!DOCTYPE html> <!--Defines the document as HTML5 document!-->

<html> <!--Opening tag! Defines the HTML document!-->

<head> <!--<head> is initiated before <body>! (Load styles etc.)-->

<meta charset="utf-8"> <!--Meta tag defining the charset-->

</head> <!--Closes head!-->

<body> <!--Opens the webpage body!-->

<!--Paragraphs, images and links come here.-->

</body> <!--Closes body!-->

</html> <!--Closing tag marked with /!-->

The  _title _ is what you usually see as the tab name

You can define the title of the page inside <head> by using <title> tags like this:

<title> this is the title of the page </title>

![](imgs/1-web-and-html_13.png)

* You can force a new line with <br />
* The tag can be placed within, for example, a paragraph (<p>) to force a line change
* Don't abuse, please
  * If you want to add space between elements, space them apart with CSS
  * Sometimes wrapping the elements into a <div> element helps

Spans are used to CSS style parts of a text for example, or other elements in one line

One could for example color single words in different colors or change fonts in the middle of text

Here is an example:

<p> we could color a <span class="yellow_text">single</span> word </p>

# Chrome Dev Tools

When doing any kind of Front End development it is  __essential__  to use the development tools of the browser.

With the developer tools you can inspect your HTML code, check out which styles come from which source, see possible errors from the console etc.

![](imgs/1-web-and-html_14.png)

We recommend using the Google Chrome browser. Other browsers have their own developer tools as well but we focus on Chrome here.

When we do dynamic content with JavaScript we absolutely must use the developer tools. When using JS to dynamically generate content we can never be sure if we got the HTML code we wanted,  __unless we check it. __ In JS development we most likely will also get a lot of error messages and console.log messages. Those will pop up in the Developer Tools' console.

Developer tools are super helpful even when doing static web pages.

# Accessing Dev Tools in Chrome

![](imgs/1-web-and-html_15.png)

There are a few ways to access the dev tools.

The easiest way is to just hit F12

Another hotkey is CTRL+SHIFT+I

You can also open the tools from the chrome menu (three dots) -> More tools -> Developer tools

You can also right click on any HTML element and select "Inspect". This method also scrolls the source code in the developer tools to said element, which is nice if we have an HTML file which is very long.

![](imgs/1-web-and-html_16.png)

![](imgs/1-web-and-html_17.png)

Elements can also be inspected with a cursor after clicking the arrow icon (see picture) in developer tools and hovering over the element of interest. This is extremely handy as the boundaries of elements are not always intuitive and this can make the aforementioned "right click + inspect" method tricky to use.

![](imgs/1-web-and-html_18.png)

# Chrome Dev Tools

![](imgs/1-web-and-html_19.png)

Basic features of the dev tools. There are others but these are enough for now.

Source code

Styles

Console

When you are developing and a web page or an application that runs on a browser and you want to check the result, it is a good practice to always:

Check that the web page looks like you want it to look like

Check that the source HTML code looks like you want it to look like

You might have a page that looks all right but the code is not what you wanted.

# User input

There are all kinds of inputs

Most common one is text input

Inputs have a type and a name. The name is what the field will be called when the data is sent to a server.

This is how this input looks:

<label for="firstname">First name:</label>

<input type="text" name="firstname">

![](imgs/1-web-and-html_20.png)

<label _> _ tag can be used to create a caption for an item in the user interface

Most often used with elements with which a user can interact with, like inputs, radio buttons, etc.

A label can be associated with a specific element by referencing the desired element's name inside label

<label for="firstname">First name:</label>

<input type="text" name="firstname">

![](imgs/1-web-and-html_21.png)

![](imgs/1-web-and-html_22.png)

* Buttons can be used to launch JavaScript actions
  * More about the functionality later
  * Now we will just see how to make them
* <button onclick="my_func();">A button</button>
* The JavaScript function to be called is defined inside onclick

![](imgs/1-web-and-html_23.png)

* Forms are used to gather data and send into the server
* For example: login forms, registration forms, shipping forms, questionnaire forms
* If you look at forms online they quite often look like this:
* <form action="/action_page.php">
* We are not using PHP as our server language, so we have to program our actions by ourselves using JavaScript
  * More about that later!

A simple login form:

<form action="javascript:login();"> OR

<form onsubmit="login();">

<label for="username">Username:</label>

<input type="text" name="username" required/>

<label for="password">Password:</label>

<input type="password" name="password" required/>

<button type="submit" id="login_button">Log in</button>

</form>

We set the form action to be a JavaScript function

We set our button's type to be submit so onsubmit will be called when the button is pressed

# Tables

Table can be made with <table> tags

Table itself is split into <thead>, the header part

And <tbody> , the body or content part

![](imgs/1-web-and-html_24.png)

Table header is split into <th> components:

<thead>

<th> ID </th>

<th> First name </th>

<th> Last name </th>

</thead>

![](imgs/1-web-and-html_25.png)

Table body is split into <tr> table row components

These table rows are split into <td> cells

<tr>

<td>1</td>

<td>Mikko</td>

<td>Mallikas</td>

</tr>

![](imgs/1-web-and-html_26.png)

# HTML cheat sheet

# HTML in a nutshell

* HTML documents are constructed by using <tags>. They have either…
  * an opening and closing tag:  <tag></tag>
  * or a single self closing tag: 	<tag/>

# HTML elements in a nutshell

paragraph <p>

heading <h1>

image <img src=" [https://www.website.com/image.png"/](https://www.website.com/image.png%22/) >

link (aka anchor) <a href="https://www.google.com">This links to Google!</a>

divisors <div> act as containers for other elements

spans <span> are used to style in-line elements like parts of text

forms <form> are used to gather user input or other data to send to a server

input fields <input> allow users to select or type out values (in, for example, forms)

tables <table> are used to define tables

for lists we have <li> and <ul> for ordered and unordered lists

# HTML page structure in a nutshell

<!DOCTYPE html> <!--Defines the document as HTML5 document!-->

<html> <!--Opening tag! Defines the HTML document!-->

<head> <!--<head> is initiated before <body>! (Load styles etc.)-->

<meta charset="utf-8"> <!--Meta tag defining the charset-->

</head> <!--Closes head!-->

<body> <!--Opens the webpage body!-->

<!--Paragraphs, images and links come here.-->

</body> <!--Closes body!-->

</html> <!--Closing tag marked with /!-->

# Assignments

[Assignments about this topic can be found here](https://gitea.buutti.com/education/academy-assignments/src/branch/master/Front-end%20Basics/1.%20Web%20&%20HTML)