Today, in Kyle’s class, we talked about HTML and CSS, in a way to recap coding.
Basics of HTML
We went over some of the basics of HTML again:
All HTML documents must start with a document type declaration: <!DOCTYPE html>
.
The HTML document itself begins with <html>
and ends with </html>
.
The visible part of the HTML document is between <body>
and </body>
.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML headings are defined with the <h1>
to <h6>
tags.
<h1>
defines the most important heading. <h6>
defines the least important heading.
<h1>This is heading 1<h1>
<h2>This is heading 2<h2>
HTML paragraphs are defined with the <p>
tag:
<p>This is a paragraph.<p>
HTML links are defined with the <a>
tag. The link’s destination is specified in the href
attribute:
HTML images are defined with the <img>
tag.
The source file (src
), alternative text (alt
), width
, and height
are provided as attributes:
<img src=”w3schools.jpg” alt=”W3Schools.com” width=”104″ height=”142″>
Basics of CSS
CSS is defined in the <head>
section of an HTML page, within a <style>
element.
The following example sets the text color of ALL the <h1>
elements (on that page) to blue, and the text color of ALL the <p>
elements to red. In addition, the page will be displayed with a “powderblue” background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Colour, Font and Sizes
The CSS color
property defines the text color to be used.
The CSS font-family
property defines the font to be used.
The CSS font-size
property defines the text size to be used.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
My Thoughts
I covered HTML and CSS quite a lot last year when creating my own online essay and portfolio site, so this class was really just a brush up on my current knowledge. However, since we have the option to use Webflow this year to create our sites, I think I would like to try that instead of HTML and CSS, as I had a lot of bother last year trying to get my site to work properly, and I feel it would make things a lot easier to use Webflow. However, it is important to remember how to properly use HTML and CSS, as coding is a fundamental aspect of UX Design, so this class was very useful for me to refresh my memory.