Basics of Web Programming (HTML Class 1)
Review of our first class!
Check our PowerPoint:
What is HTML/CSS?
HTML stands for HyperText Markup Language. It is a programming language you use to design webpages. It defines structures and elements of your webpage.
CSS stands for Cascading Style Sheets. You use CSS to style your websites (e.g. changing background colours, font size, colour of your text, etc.). You are adding style elements to your website to make your website something more than just a plain text.
2. Codepen IO
We are going to be using a text editor called Codepen IO for this class.
Go into the link above and sign up for Codepen.
3. Basic Structure of HTML
HTML is consisted of elements. Tags mark the start and the end of an element. <html>, <head>, <element> are all examples of HTML tags. body, head, element are are examples of element of the website.
It is the convention to indent the lines to show the hierarchy of your elements. head element is a child of html element. element is a child of body element.
There are some special tags in HTML that are pre-defined.
<body> tag contains the actual content of the webpage. It contains things like images, texts that actually appear on the webapge.
<h1> tag: header tag
bold, large texts that are used for titles/subtitles.
you have <h2>, <h3>, ... tags and as number gets bigger, the font gets smaller.
<p> tag: paragraph tag
4. Adding images
You use <img> tags to insert images onto your screen.
src defines the source of the image. You put in the image address in src parameter.
Make sure you put quotation parts around the link.
You can put in the link of the image either on your computer or on the Internet.
If you want to copy an address of the image from the internet, just right click on the photo and click on 'copy image address.'
5. Basic CSS
To change a style of HTML element, you need to specify what element you are choosing and what style you are changing.
In line 1, you specify that you are going to modify p tag. In line 2, you specify that you are changing the colour of the text to #1e2cf2.
In line 6, you are changing the width of the image. px stands for pixel, which is a unit of measurement used in designs and web designs.