HTML and CSS Cheat Sheets for Beginners

Are you having a difficult time learning HTML and CSS? It’s okay! Everyone has to start at some point. The question is are you willing to take the time to understand how to create a basic page design and layout? You can do it. You just need to find the time. I’ve collated some common HTML tags, attributes and CSS properties that you can use. Use it as reference whenever you need to.

HTML and CSS Cheat Sheets for Beginners

Basic HTML Structure

<html>
<head>
   <title>Title of the website<title>
</head>
<body>
   <p>Paragraph goes here…</p>
</body>
</html>

HTML 5 Page Structure

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
   <title>Title of the website</title>
</head>
<body>

<header>
   <nav>
     <ul>
         <li>Link 1</li>
         <li>Link 2</li>
         <li>Link 3</li>
     </ul>
   </nav>
</header>

<section>
   <img src=”banner goes here” />
</section>

<article>
   <p>Article goes here…</p>
</article>

<aside>
   <h2>Supporting Content</h2>
   <p>Text goes here…</p>
</aside>

<footer>
   <p>Copyright 2017</p>
</footer>

Common tags

For formatting texts

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Attributes that you can use (example below)

<h1 style=”css styling goes here”></h1>
<h1 class=”class name”></h1>
<h1 id=”id name”></h1>

<strong>Bold text and convey importance</strong>
<b>Bold text</b>
<em>Italicize text and convey emphasis</em>
<i>Italicize text</i>
<u>Underlines text</u>
<blockquote>Adds quote to text</blockquote>

For content containers or sections

<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

<div>division of content</div>
<span>section of content within a content</span>
<p>Paragraph of Text</p>

Attributes that you can use (example below)

<header style=”css styling goes here”></header>
<header class=”class name”></header>
<header id=”id name”></header>

Note: You can change header to nav, section, article, aside, footer, div, span and p.

<br /> Adds a line break
<hr /> Horizontal Rule - adds a basic line

Lists

<ul>Unordered List</ul>
<ol>Ordered List</ol>
<li>List items inside ordered or unordered list</li>

Adding Images

<img src=”url” alt=”text” />

Adding Links

<a href=”url”>link text</a>

Adding Tables

<table></table>
<tr></tr>
<th></th>
<td></td>

Some attributes you can use for Tables.

border cellspacing cellpadding align bgcolor width height

For td.

colspan rowspan width height bgcolor align Note: You can use style, class and id attributes in a list, image and hyperlink.

CSS

External

<link rel=”stylesheet” type=”text/css” href=”style.css” />

Internal

<style>
   p { color: red; }
</style>

Inline

<p style=”color: red;”>Paragraph goes here…</p>

CSS properties and values

color: red; background-color: green; background-image: url(image.jpg); border-color: blue; border: 1px solid red; text-align: left; text-decoration: underline; font-family: fontname; font-size: 14px; font-weight: bold; width: 100%; height: 100%; margin: 10px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; padding: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; list-style: none;

Basics: Get Started with HTML

HTML means Hypertext Markup Language. It is used to create a website.

Basics: Get Started with HTML

What you need to start writing HTML.

  • Browser – e.g. Chrome, Firefox, Opera
  • Text Editor – e.g. Notepad++, Dreamweaver

Terms that you’ll hear and use often:

HTML Tag

E.g. <title></title> The word title is the tag name, surrounded by less than and greater than characters.

HTML Element

E.g. <h1>This is a text example</h1> Element has a start tag <h1>, end tag </h1>, and content in between This is a text example. Notice that the end tag has a forward slash before the tag name. Sometimes start and close tags are referred to as opening and closing tags.

There are HTML tags that do not require an end/closing tag.

E,g,

  1. <br> – creates a break line.
  2. <img> – defines an image.
  3. <hr> – creates a horizontal line.

HTML Attribute

Attribute adds definition to our element. Attributes are present after the tag name. E.g.

  1. <h1 class=”header”>Header Title</h1>
  2. <h1 id=”header”>Header Title</h1>
  3. <h1 style=”color: red;”>Header Title</h1>

In the examples above, we can identify the ff. attributes.

  1. class=”header”
  2. id=”header”
  3. style=”color: red;”

These attributes consist of the ff. Attribute name – class, id and style Equal sign – = Value enclosed in quotation marks – “header”, “header”, “color: red;”

Basics of Designing Web Pages

What is the Internet?
Connected networks that use the TCP/IP protocol. TCP/IP means Transmission Control Protocol/Internet Protocol. It is the communication language used to allow networks to follow the same procedures and rules. Interested in understanding transmission control/internet protocol?

Website
A website is the collection of content that you put in web pages. The content could mean multimedia, text or image.

Web Pages
These are HTML Documents that you connect to the Internet.

What is HTML and where does HTML come in?
HTML is HyperText Markup Language. It is primarily used to structure and input content in a web page.

Basics of Designing Web Pages

Designing Web Pages

Web Designers, YOU, should think about the creative and technical side of the web. Designing web pages are not always about how good it looks but how it can be beneficial to your users.

Let’s talk about UI, UX and Usability.

User Interface
It is the visual part of the system that enables you as the user to interact with your code or program.

User Experience
UX is responsible for the satisfaction of a user. It is used to focus on what you need as a user versus what you want.

Usability
The part where your system becomes effective. It is a quality attribute that verifies whether your system is easy-to-use or not.

Before you begin…

8 Web Design Principles you should consider

  1. Objective – what your website purpose is.
  2. Site Layout – the structure of your web page.
  3. Visual Hierarchy – how your content are displayed by importance.
  4. Direction – what you want your users to achieve in your website.
  5. Accessibility – how fast and easy can your visitors view and access your web page.
  6. Consistency – consistent elements throughout your web page/s.
  7. Content – words and elements you choose for your website. It must communicate well with your audience.
  8. Alignment and Spacing – how visually organized your web page/s is/are.