Basic Workshop 1
This is the companion guide for the AWS Build On Singapore 2020 Workshop 1.
Web pages
Web pages are made up of 3 components - HTML, CSS and JavaScript. HTML provides content and structure to the web page.
HTML stands for Hyper Text Markup Language - Hyper Text means that the document can contain links to other pages, while Markup Language is a language that allows us to tell computers how to process and present content.
The latest HTML version is known as HTML5.
Basic HTML tag structure
Tags are enclosed with angled brackets and look like the following:
<h1>Usually an element comes in a pair of tags - opening and closing tags.
<h1></h1> Some tags are self-closing - they don't need a closing tag.
HTML attributes
Attributes are additional information that you can attach to a tag. An example of an attribute is:
<img src="logo.jpg" alt="Company logo">src and alt are both attributes to the img tag.
Text editors
It's best recommended to use text editors to write code; and here are a couple of recommended ones with their links:
Basic HTML structure
Common HTML tags
| Tag | Description |
|---|---|
<html> |
All HTML code should be inside the HTML tag |
<head> |
Contains metadata of the page. Metadata means data about data |
<title> |
Title of the page. Appears at the top of the browser window/tab |
<h1> to <h6> |
Different level of headings. Provides semantic meaning to search engines or web crawlers |
<p> |
You can put text content here. |
<span> |
Used to group inline-elements in a document. Provides a way to hook a part of text/document for CSS & JavaScript |
<a> |
Used to create links to navigate to a certain part of a page or other pages of the same website or external site |
<img> |
Used to put images in your page. Must provide src attribute with the path to the image |
<ol>, <ul>, <li> |
Used to create lists, ol for ordered lists, ul for unordered list, and li for individual list items. Provide typeto control the type of the list |
<input> |
Create inputs for user input. Provide the type attribute to control the input type i.e. text, textarea, password, radio, checkbox |
<div> |
Basic container used to group items - no semantic meaning to search engines and web crawlers |