14 KiB
Web & HTML
- Websites and The Internet
A short overview of the Internet and WWW
Anatomy of a website (or web app)
HTML, CSS, JS
- HTML basics
Setting up
tags: p, h1, img src, a href, div
boilerplate
-
Chrome Dev Tools
-
HTML continued
Title, span, text-align, br..
User input
Tables
- 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:
- VoIP (Skype/Teamspeak)
- File transfers between computers
- remote connections to other computers
- a big part of the Internet but it consists of other kinds of traffic, too:
- In other words, the internet is an infrastructure and WWW
- is served via it
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)
- Browsers ( rendering engine in parentheses)
- 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
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
Backend
- 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
- Simple websites don't require a dedicated back-end
Anatomy of a website
HTML, CSS and JS
Anatomy of a website
- Historically, websites looked something like this
- Nowadays, a website can even be a full-blown application!
- 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
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/
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/
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
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 . They have either…
a) an opening and closing tag: stuff goes here
b) a single self closing tag:
Both examples above constitute an HTML element
- A _paragraph _ is made by using the
tags
- It looks like this:
-
Hello World
-
- 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
-
This is a title
-
- 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" / >
- 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 for anchor.
- The link will itself be as a href attribute standing for hypertext reference.
- Remote link:
- Local link:
- _Divisors _ are containers we can hold our text and images in
- made using tags
- made using
- Let's put our h1, p and img elements in a div like this:
-
-
My new cat!
-
it's name is Whiskers
-
- We don't need to style it yet, it's done with CSS
Boilerplate
aka: the stuff you have to write before getting to the stuff you want to write
© Buutti Oy, All Rights Reserved
<html> <head> </head> </html>The _title _ is what you usually see as the tab name
You can define the title of the page inside <head> by using
- You can force a new line with
- The tag can be placed within, for example, a paragraph (
) 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 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:
we could color a single word
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.
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
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.
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.
Chrome Dev Tools
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:
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
- Buttons can be used to launch JavaScript actions
- More about the functionality later
- Now we will just see how to make them
- A button
- The JavaScript function to be called is defined inside onclick
- 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:
- 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:
ORLog in
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 tags
Table itself is split into
, the header partAnd
, the body or content partTable header is split into
Table body is split into
table row componentsThese table rows are split into
HTML cheat sheet
HTML in a nutshell
- HTML documents are constructed by using . They have either…
- an opening and closing tag:
- or a single self closing tag:
HTML elements in a nutshell
paragraph
heading
image <img src=" https://www.website.com/image.png"/ >
link (aka anchor) This links to Google!
divisors
spans are used to style in-line elements like parts of text
forms are used to gather user input or other data to send to a server
input fields allow users to select or type out values (in, for example, forms)
tables
components: | ||
---|---|---|
ID | First name | Last name |
cells | ||
1 | Mikko | Mallikas |
for lists we have
- for ordered and unordered lists