IXD301 – Week Four: HTML and CSS

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>.

For example:
<!DOCTYPE html>
<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:

<a href=”https://www.w3schools.com”>This is a link</a>

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%;
}
{
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.

 

Leave a Reply

Your email address will not be published.