9.7 KiB
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 part
Table 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