RobotRogue
1

The Basics of the Web and HTML

The Web

The Web can be broken down into a few main pieces: HTML, HTTP, and URLs.

HTML: The web is a collection of HTML Documents (Hyper Text Markup Language) -- HTML is what glues everything together, and also the main type of document on the web. The types of files that can be found on the web also include Plain Text, HTML, images, videos, music, etc.

HTTP: Stands for Hyper Text Transfer Protocol. It's the protocol (kind of like a language)l used to transfer data from web servers to your browser.

URLs: Also known as 'links' - these are the pointers used to point to HTML documents on the internet. A URL can be formatted like this: http://www.udacity.com

To include this into a webpage, you would use the <a href:"..."> or 'Anchor' tag.

Another way to use it in HTML is the <link> tag, which can be handy when linking to say, a CSS file or a .JS file. It looks like this: <link rel="stylesheet" href="style.css">

What is HTML?

HTML is the language that webpages are 'coded' in. HTML is made up of:

  • Text content, or 'what you see'...
  • Markup language, or 'what the content looks like'...
  • References to other documents, like images or videos...
  • Links to other pages (URLs)

HTML Tags:

HTML markup is made up of tags. Most (not all) tags consist of an <openingTag> and a </closingTag> and between those tags are your content.
The opening tag, content, and closing tag are also referred to as an "Element". The tags that don't require a closing tag are called "Void Tags".

Some basic tags found in HTML documents are:

  • <b></b> The "bold" tag. It makes text bold
  • <em></em> The "emphasis" (or, Italic) tag. It italicizes text.
  • <p></p> The "paragraph" tag. It puts an invisible 'block' or 'box' around the content.
  • <img> The "image" tag (for including images in a webpage, note: it's good practice to use the alt="description of image" attribute)
  • <br> The "break" tag (think of it like hitting the enter key in a word document)
  • <span> Used to group inline elements in a document.
  • <div> Defines a division or a section in an HTML document. (Ie: it can be used to group block-elements to format them with CSS)

HTML Tag Attributes:

Tags have something called HTML Attributes. Attributes have a value, or definition or control to that attribute. The format of an HTML tag with attributes would look something like this: <tag attr="value">content</tag>

And an example of that would be along the lines of: <a href="www.udacity.com">Udacity's Website</a>

How that breaks down is: the 'a' is the opening tag, called anchor, the href is the attribute, www.udacity.com is the value, Udacity's Website is the content, and the /a is the closing tag.

'Inline' vs. 'Block' Tags:

One other thing to mention is the difference between an "inline" tag and a "block" tag. Knowing the difference is important in HTML because your web browser sees and treats these tags differently.

  • Inline tags - applies formatting or attributes to what is between those tags, and nothing else. This is important because you can control content within block tags with inline elements. (Among other things)
  • Block tags - the formatting applies a 'container' around the content within those tags. The container can be controlled with attributes and CSS. The content inside the container can be also. Learning how to manipulate block tags is pretty important to developing web pages.

Some more into this are <span> and <div> elements. SPAN is an inline element, DIV is block element.

2

Creating a Structured Document with HTML

Elements of a Webpage

HTML is the structure of a page.
CSS is more of the style of a page. Controls color, formatting, and so on.
JS files are the interactive parts of a page. They change some element of a page.

Developer Tools (Console)

Using your browsers built-in developer console allows you to see what's going on "under the hood". There are multiple ways to open the developer tools in Chrome (https://developer.chrome.com/devtools/docs/shortcuts)

This tool allows you to see how the browser is treating what is in the page that it is displaying. It allows you to see different elements, the page structure (or, DOM), you can expand and collapse the tree, and even make some (temporary) modifications to the page to see what affects what.

Page Structure

The browser will build a tree-like structure of the HTML it is reading. In the Developer Tools of your browser you can view this structure - and expand and collapse the different elements within the tree. Multiple elements can be nested within each other.

For example, the tree might display a Paragraph tag (element) and when expanded, you might see Anchor tags, IMG tags, SPAN tags, text, and so on.

Visual Styling

Two pages can have identical HTML, however can look completely different. The reason they could look different is the styling applied to the page. So the HTML code can structure the elements of the page, and the styling can dictate what those elements look like.

Summary So Far

HTML and CSS are both "languages" HTML controls the "structure" of a web page CSS controls the "style" of a page (how it looks). When programmers talk about the "DOM" they are talking about the tree-like structure of a page.

HTML/CSS/DOM

HTML - HyperText Markup Language - the standard markup language used to create web pages.

CSS - Cascading Style Sheets - style sheet language used for describing the look and formatting of a document written in a markup language.

DOM - Document Object Model - a cross-platform and language-independent convention for representing and interacting with objects in HTML (and other markup languages). The nodes of every document are organized in a tree structure, called the DOM tree.

Boxes and More Boxes

A website can be broken down into a series of boxes (from a few to a lot, depending on how detailed you want to get with styling).

When you think of your webpage as a series of boxes on a grid for example, it makes it a lot easier to move elements around and plan your designs. Also, if you can visualize how the page is laid out as boxes, it can help your write and format your HTML with that in mind, which can also make it easier for you to make changes later if you need to.

From Boxify-ing to HTML

Boxifying is the concept of taking a mockup or design, and seeing it as a series of boxes (or boxes within boxes). You can go about figuring this out in a few ways, such as printing a mockup and drawing boxes around parts of the page, as an example.

Once you figure out how to boxify your design, you can then start planning how to apply visual styling to those boxes and what is inside them. You can assign a "class" to each of these boxes. Think of a class as a label. Classes allow you to create a style for that class, and then you can apply that class or style to various boxes (elements) in your page.

To define and apply the styles to your classes, you would commonly use a style sheet (This is where CSS comes into play). A style sheet is basically a document that defines the styles to elements, classes, etc. It allows you to write simpler HTML, and define and apply styling easier.

3

Adding Style to Structure with CSS

In-page Styling vs. Linking to a CSS File

Adding a link to a style sheet can be done in the <head> tags... by using "link", as an example: <link rel="stylesheet" type="text/css" href="style.css">

BUT, you can also apply style directly, without having to use a separate file and link tag. You can do so by using the <style> tags, shown below:

<style>
.description {
color: red;
}
</style>

CSS Order Rules

You can also think about CSS as a search and replace tool: you identify a class or a tag of the element you want to find (or match, in CSS terminology), and then what you want to do with it, or what property values to replace with different ones.

Order Matters

It also matters where you define the rules and in what order they are applied. Styles can be defined in different places and are applied in the following order, with definitions further down the list overwriting previous definitions:

the default style of a browser (different browsers have slightly different styles) stylesheet in a separate file (this is what you will be mostly using) stylesheet inside HTML (this can be done for small projects but is not ideal) inline style in an element (this can also be done but should be avoided)

Specifics Matter

"Cascading" means that rules are applied not only to the elements they directly match, but also to all of those elements' child elements. However, if a child element has multiple, overlapping rules defined for it, the more specific rule takes effect.

In general, descendant elements inherit text-related properties, but box-related properties are not inherited. Properties that can be inherited are color, font, letter-spacing, line-height, list-style, text-align text-indent, text-transform, visibility, white-space and word-spacing. Properties that cannot be inherited are background, border, display, float and clear, height and width, margin, min- and max-height and -width, outline, overflow, padding, position, text-decoration, vertical-align and z-index.

Inheritance prevents certain properties from being declared over and over again in a style sheet, allowing the software developers to write less CSS. It enhances faster-loading of web pages by users and enables the clients to save money on bandwidth and development costs.

Get Classy

"Class" is like a group, or a label, if you like. For example:

<h1 class="article">

Above, "article" is the value of the class for <h1>. In CSS, if you put in something like...

.article {
color: #EFEFEF;
}

You would be able to apply that color to the class "article" when you use it in HTML.

Elementary, My Dear

When creating HTML and CSS for your page, your elements should choose the right element for the right content. As an example, if you have a title to an article, that's only text. In HTML, instead of using a DIV tag, it would be more appropriate to use the H1 tag, as that is meant for text/titles. (Especially when your webpage is indexed by search engines)

Another reason to do so, relates back to inheritance. You can apply styling to the H1 tag as an example, and wrap the H1 element in a DIV tag with different styling. It's a way to add even more control over styling of each page element. (But be cautious, this can get out of hand pretty quick.)

Box Models

The box model is important to understand. Open this link to display the box model. The "content" can be text or an image... whatever. Around that is the padding, then the border, then the margin. Each of these can be controlled in CSS, and also each behave a bit differently.

The margin, border, and padding can have their own attributes, including color, style, width, and so on. The CSS reference page is a big help here, because there are a lot of things you can do to each.

Wide Boxes

Keeping the box model in mind, there are a few things to know. Each of the 'boxes' (margin, border, padding, and the content) all have width. Now, you don't *have* to assign a width value to them, but the content will always have width. If you do plan to use padding, and set width values, be mindful that they all add up.

So in other words, if you assign a width to each, you have to total those all up, and that's how much actual width your element will use on a page.

One way around having to constantly calculate how much width is used, you can use the CSS style called "box-sizing: border-box;" This allows you to set the box width, and it will auto-adjust it. (It doesn't include the margin in this though)

There is a small problem to using this -- older browsers don't support this CSS style. By using browser-specific code/prefixes for the box-sizing style, you can get around it, but it's not perfect (yet).

Another way to handle box sizing, is to use percentages for the sizing. It adjusts the sizing based on the size of your screen or browser window. But there are limitations to this as well. If you resize too large or too small, because it's based on percentage, this could have some unexpected effects.
But, there is a way to combat this as well. You can use 'max-width' styling in CSS, so when resizing, or if viewed on a screen larger than you expected, it will prevent the page from expanding too far and looking strange.

Box Stacking

Now that you understand that pages are a bunch of boxes, and how to control the style and size of those boxes, now you need to control where the boxes get positioned on a page. For now they've mostly stacked one on top of another. Well you don't always want that, sometimes you'll want a box beside a box and so on.

To get a DIV to display next to another one, you would use "display: flex". This will cause one DIV to sit next to another DIV. This could potentially look weird if one box is taller than the other for example, but using "box-sizing: border-box;" can be helpful here as well.

Picture This

Another form of content for your webpage are images. The image itself has to reside somewhere for your page to link to. If for example you have an image on your hard drive, but your page is on the internet -- your page can't point to your computers hard drive (not without a web server)... so your image would have to be stored somewhere on the internet or the web server where your website is.

Once you have a home for your images, you can use the IMG tag in HTML to display the images on your page. The IMG tag looks something like this:

<img src="img/app.png" alt="This is a screenshot">

To break that down, "IMG" is the tag, "SRC" is the source or location of the image file, "ALT" is the alternate display of the image (in case the browser can't display it, and also for vision impaired web viewers) -- it is good form to always include ALT text for your image.

Test and Revise

When writing code, you will need to test your work to see if it actually does what you expect it to. It's also standard practice in software development, since a bug can make or break your program (or in the case of web design, can cause your page to display really weird, or not at all)

As you code, you should run your tests (in the case of web design, save your html and view it in a browser) - if anything looks weird, doesn't display, or needs to be changed - go back to your HTML and make your changes. Do this often, so you can get a good idea of what you're doing in HTML and CSS and how it affects what is displayed in the browser.

Whenever possible, view your site in other browsers... Firefox, IE, on your iPad or Android device... this will give you a really good idea of how your code works and how it works in other environments.

Get Valid

Both HTML and CSS have a specific format that they need to be written in to work. The browser does it's best to interperet and display the page even if you don't quite get your HTML and CSS 100% correct.

Of course, it's good form to write correct code (especially in programming!) so there are tools available to check your code to see if it has errors, and to see if it meets the standards.

The validator for HTML can be found here.

The validator for CSS can be found here.

Top