Skip to content

HTML and CSS 1

MCTC Course schedule (next class, Fall 2019)

What is HTML?
Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. In this course we will cover HTML and CSS.

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as heading, paragraph, image, and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page

The basics of HTML Elements are covered on this W3Schools page  (though overall the Mozilla Developer Network – below – is a better resource).

Here are some HTML tags, attributes and an HTML Glossary

Mozilla Developer Network
This is a very good, peer reviewed and open source collection of web knowledge that is well-organized and accessible for beginners. It also contains deeper documentation that experienced developers consult all the time. Excellent starting points:

Chrome DevTools for Beginners
DevTools for Beginners teaches you the fundamentals of web development as well as the basics of DevTools. Check out Get started below if you’d prefer tutorials that focus on DevTools.

What is a Text Editor?
The formal definition is: “A text editor is a type of program used for editing plain text files.” Essentially, a text editor is a program on you computer that allows you to create and edit a range of programming language files. AKA this is the place where you write your code! Text editors handle “hand coding” many different languages, i.e.: HTML, CSS, JavaScript, PHP, Ruby, Python, and so forth. The one used in our classroom is the Atom Text Editor and can be downloaded for free here atom.io

FreeCodeCamp
If you are self-motivated and like working through lessons on your own, this is a great, FREE option to complete exercises that will grow your skills. You will be able to keep track of your progress and connect with other learners around the world if you want to. https://freecodecamp.org

Codepen
This is an incredibly helpful tool. Play around here to get a feel for it, but I recommend signing up for a free account. It is similar to FreeCodeCamp in that there is an editor pane and a pane that renders the HTML/CSS as you enter it. If you can make the time, watch this short tutorial video: An In-Depth Introduction to CodePen for Beginners

Official WC3 Validator for HTML and CSS
HTML and CSS that you write should be “valid” which means there are no typos or mistakes — it conforms to the standards agreed upon by the WC3. You can use this online tool to validate your documents: https://validator.w3.org/

Most Web documents are written using markup languages, such as HTML. These languages are defined by technical specifications, which usually include a machine-readable formal grammar (and vocabulary). The act of checking a document against these constraints is called validation, and this is what the Markup Validator does.

Block vs Inline From this page: One major concept to grasp in HTML is the difference between block elements and inline elementsBlock elements are those that take up the full width available on a web page, effectively blocking out any other elements from sitting next to it on the left or right. Inline elements are those who only take up as much width as is needed to display the contents of the element, thereby allowing other elements to be in line with the inline element. More here: HTML Blocks

Placeholder Text and Images
Sometimes you’ll want to build out a template for a new site but not have all of the content ready. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. There are a number of free lorem ipsum generators available. Below are two:

Understanding the Index.html Page on a Website: How to create default web pages and Human Readable URL structuring

Internet History
The internet has become a vital part of the modern world, inseparable from daily life and routines. It wasn’t always this way though; the history of the internet started somewhere. From simple computer networks to global interconnectivity and instantaneous wireless communications, the rapid and dramatic evolution of the internet can help with understanding the changing nature of technology and communications.