Web Front-End Programming
HTML Intro
This is the basic “webpage” scaffold on virtually every website on the internet. It’s made up of “HTML”.
Copyright By PowCoder代写 加微信 powcoder
1 2 3 4 5 6 7 8 9
What is HTML?
HTML stands for “Hypertext Markup Lanaguge”. It is a markup language that provides the structure for webpages. It does not provide the aesthetics/style (that’s what CSS is for), and it does not deal with dynamic state (that’s what Javascript is for).
A standard HTML tag consists of:
1. Tag name
2. (optional) Series of attribute/value pairs 3. (optional) Inner HTML
1
3
What is a web browser?
A web browser is essentially a tool that takes in HTML, CSS, Javascript, and more, and renders dynamic web pages. Think of a web browser a little bit like a compiler/interpret that takes in our HTML as “source code” and produces something that is compiled for the user/client.
This “source code” is available in most web browsers, and is easy to find and analyse.
is required by the specification on modern websites. However, if you omit it, many browsers will render the page anyway.
1 2 3 4 5 6 7 8 9
Contains meta information of the page. Nothing in this section is rendered in the browser.
We usually use this to:
Give meta-information about the page Load in CSS stylesheets
Load in Javascript code
2
3
4 5 6
Everything inside renders on the webpage. only begins rendering after all the meta information in has been processed by the web browser.
Most tags associated with the body focus on rendering something…
Layout Tags
Layout tags help us separate our page into separate structures. Many of these tags have limited inherent properties, and are just semantically meaningful ways of distinguishing or identifying particular key parts of the webpage.
1 2
3
4
5
6
7
8
9
10
11
12
13
14
Formatting Tags
Formatting tags usually have some basic visual properties that are assigned to all elements inside those tags.
1 2
3
4
5
6
Links:
The “anchor” tag is how we link to another resource from our current page. It takes in a URL that may be relative or absolute.
There are other interesting properties of the anchor too, including:
title attribute which is the hover-over tooltip text target=”_blank” to open the link in a new tab
1 Settings
3 Wikipedia 4
5
6 
Images:
An image tag is one of many HTML properties known as a “void” tag. Since it doesn’t need to contain any inner HTML, we don’t need a close tag.
We can specify image height, width, and source of the image
We can also specify the “alternate” text in case the image doesn’t load
1 
Forms will be covered in much more depth in another lecture. In particular, the dynamic interaction with a form and it’s results will be covered later. We will not cover action or method of a form just yet.
Forms provide the structure to collect information from a user and then submit it. Key parts of forms include:
inputs & labels textarea
Form inputs consist of the a number of properties:
type: the type of the field (text, radio)
name: name of the attribute during submission
value: the default value to the field that will be sent when submitting placeholder: background text to hint at what value to input disabled: boolean as to whether the field is disabled
1
3 4
5
6
8
9
11
Textareas are essentially “extended response text inputs”
1
You can make a form button with . These can have a lot of functionality added to them later with Javascript.
An input of type “submit” is also a button that will automatically submit the form (covered later).
1
5
Interesting HTML
1
2
5 HTML5 brought with it a number of other interesting features.
6 These include the ability to render the playing of audio, and video
9
13
Extra Information
The tag often has an attribute that search engines use to understand the language your website is in.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com