Skip to content

Instantly share code, notes, and snippets.

@noynaert

noynaert/html5_CSS_Introduction.md

Last active December 25, 2017 09:19
Show Gist options
  • Save noynaert/ac5ef2079ff83d7ac0e9a26a09ef9643 to your computer and use it in GitHub Desktop.
Save noynaert/ac5ef2079ff83d7ac0e9a26a09ef9643 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5_CSS_Introduction
Raw
html5_CSS_Introduction.md

For CSC 346

This gist may be of general use. However, it is intended for students in CSC 346 at Missouri Western State University. Some students in the class have not been exposed to HTML and CSS. This document provides a quick and dirty introduction to HTML. Some of the fine points may be glossed over in the interest of providing students information they need for the course.

The focus is on HTML5. CSS3 is used, although the coverage of CSS will be broad enough to make the material valid for all current and past versions of CSS.

You will need a text editor to follow along. Avoid using notepad that comes with Windows. There are a number of them

📝 Editors 📝

Notepad++ is an old standby. It is simple and quite good. It is native to Windows, but I run it on Linux using Wine.

VSCode I hate Visual Studio. However, this editor is taking the tech world by storm. It runs on Windows, Macs, and Linux. The Linux version was a bit dodgy, but with version 1.9 they seem to have gotten it right. This editor is not nearly as easy to use as Notepad ++, but it is much more powerful. I am still learning to use it. If you are brave, give it a try.

💻 Environment 💻

You should be able to view all of the documents here with just a browser. You should be able to view all of the html and css with nothing but the browser. The bootstrap activities will also require an Internet connection, but once your browser caches the libraries you won't need the Internet connection.

Skeleton of a basic HTML document

Video of Part 1

  • Tags and Elements
  • Self-closeing tags
  • Head and Body
  • Nesting of tags

Skeleton file -- copy paste it into your editor

<!DOCTYPE html>
<html  lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
  <title>Skeleton for ACT 346</title> 
</head>
<body>

</body>
</html>

There are a lot more HTML5 tags. A number of cheatsheets are available at https://websitesetup.org/html5-cheat-sheet/

Basic tags and entering text

  • headings <h1> through <h6>
  • paragraphs <p>
  • break <br />
  • Attributes
  • Flow of text in paragraphs
  • White space compression
  • Preformatted text <pre>

CSS

Video of Part 2

Cascading Style Sheets are used to control how a page looks. For CSC346 the CSS itself is not as important as some concepts associated with them. CSS selectors come into play in many other areas.

CSS can go in three different places. They can be in a separate file, in the header, or as an attribute within a tag. In most cases they should be placed in a different file.

Add the following tag to the <head> element, then create a file called "style.css"

<link rel="stylesheet" type="text/css" href="style.css" />
  • selectors
  • declaration block
  • RGB colors
  • More complex selectors

Image

Video of Part 3

  • Image <img>
  • Full <img src="fileName.jpg" alt="Some text" />

Links

  • Anchor tag <a>
  • As an href link
  • As an anchor for linking to -- Don't do this anymore. It is no longer part of HTML5.

Lists

Video of Part 4

  • Unordered list <ul>
  • Ordered list <ol>
  • Lines <li>
  • Indented lists
  • Lists of links

Tables (where bootstrap shines)

  • Table tag <table>
  • Table Row <tr>
  • Table Data <rd> -- The work-horse
  • Table Header <th> -- Like td, but center & bold
  • Other table tags
    • <thead>
    • <tbody>
    • <tfooter>
  • CSS for tables
  • Tables with Bootstrap

Interlude on the glories of Bootstrap

You can get the code to include bootstrap from https://getbootstrap.com/docs/3.3/getting-started/

I suggest getting the "Bootstrap CDN" links. It is best to get the latest ones from the above site, but here is the code that needs to go in the <head> of your document:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity_no="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity_no="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity_no="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

ID and Class attributes

Video of Part 5

  • id -- Each value can only be used once within a document.
  • class-- Each value may be used many times

Divisions (and spans)

  • Div is like a super-paragraph <div>
    • Span is within a line <span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment