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.
- Tags and Elements
- Self-closeing tags
- Head and Body
- Nesting of tags
<!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/
- headings <h1> through <h6>
- paragraphs <p>
- break <br />
- Attributes
- Flow of text in paragraphs
- White space compression
- Preformatted text <pre>
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 <img>
- Full <img src="fileName.jpg" alt="Some text" />
- 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.
- Unordered list <ul>
- Ordered list <ol>
- Lines <li>
- Indented lists
- Lists of links
- 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
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="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="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="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
- id -- Each value can only be used once within a document.
- class-- Each value may be used many times
- Div is like a super-paragraph <div>
- Span is within a line <span>