html | NemoQuiz

HTML (hypertext markup language) defines what content appears on a webpage.

HTML is one of the three languages that every web developer must learn, along with CSS and JavaScript.

(This project uses only HTML and CSS. JavaScript comes later.)

See HTML on w3schools for self guided learning.

In CSP class, we will follow these steps to create a simple example website:

Step 0: Text Editor and Folder Setup

• Install Sublime Text portable or Notepad++
• Create a project folder and keep all HTML/CSS/image files inside it
• If a file isn’t in the correct folder, the browser can’t find it.

Text Editors for Web Design

Step 1: First HTML Page (p, h1)

• Create index.html in the project folder (must end in .html)
• Add a heading and paragraph inside <body>

Web HTML Intro

Step 1.5: Previewing Your Site
• Double-click index.html to open it in a browser
• Refresh after every save

Step 2: Images and Links (multiple files in one folder)

• <img> tags for images
• <a> tags for links

Note: you don’t need a full hyperlink to link to a file in the same folder. You just need the filename like this:

<a href="nextpage.html">Next Page</a>

Step 3: Basic HTML Structure and Template

• Recognize <!DOCTYPE html>, <html>, <head>, <body>
• Put all visible content in <body>

HTML Template (paste this into new blank HTML pages)
W3Schools HTML Intro – explains what each tag is for
(doctype, html, head, body, etc)

Step 4: Intro to CSS (element selectors only)

• Add CSS inside <style> tags inside <head>
• Use element selectors: p { … }, h1 { … }
• Change colors, width, border, margin
• Put <style> section inside <head>

Step 5: div, span, and the Box Model

• Use <div> to group content into sections (block element example)
• Use <span> to style part of a sentence (inline element example)
• Understand width + padding + border + background-color
• Center a box using margin: auto

Step 6: id and class Selectors
• Use id to style one specific element (#special)
• Use class to style a group of elements (.warning)
• Apply id/class to div, p, and span
• Use id only once per page. Use class for things that repeat.

Other HTML Content

HTML lists – ordered and unordered lists and list items
HTML text formatting – bold, italic, subscript, etc
HTML tables (and CSS Styling Tables)
HTML buttons – can connect to JavaScript functions later
HTML entities – codes for special symbols and other characters
HTML summary and details – details section is collapsible
HTML figure and caption – picture with a caption
HTML input types – text, number, checkbox, password, etc
HTML select element – drop down lists
HTML forms – collects user input
HTML file paths – nice if you want images in a separate folder
Meta Viewport – one line to make pages fit different screens
HTML Headings h1-h5 – heading hierarchy
HTML Semantic tags – header, footer, section, etc

Other CSS Content

CSS Troubleshooting – what to do when your CSS doesn’t work
CSS width and max-width
CSS display: inline-block – simple side by side content
CSS styling images – how to center images as block elements
CSS Fonts – font-family, size, also see CSS Web Safe Fonts
CSS Colors – color names, hex, rgb
CSS box shadow – easy effect that looks nice
CSS border radius – easy effect that looks nice
CSS opacity – image transparency / opacity
CSS overflow property – setting for oversized content in boxes
CSS Accessibility – design ideas to make pages more accessible
CSS Navigation Bars – horizontal or vertical menus
CSS Combinators – more advanced ways of selecting elements
Flexbox (Basic) – more advanced layout system