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. Web browsers receive HTML documents from a webserver or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or an image a hyperlink to somewhere else, can italicize words, and can make font bigger or smaller, and so on.
Let's explore a (paragraph) element a bit further:
Elements can also have attributes, which look like this:
You can put elements inside other elements too — this is called nesting:
<p>My cat is <strong>very</strong> grumpy.</p>Some elements have no content, and are called empty elements. Take the <img> element we already have in our HTML:
<img src="images/firefox-icon.png" alt="My test image">That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Now we'll look at how individual elements are combined to form an entire HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>My cat is <strong>very</strong> grumpy.</p>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>This section will cover some of the basic HTML elements you'll use for marking up text.
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4><p>This is a single paragraph</p>-
Unordered lists are for lists where the order of the items doesn't matter, like a shopping list. These are wrapped in a
<ul>element. -
Ordered lists are for lists where the order of the items does matter, like a recipe. These are wrapped in an
<ol>element.
Each item inside the lists is put inside an <li> (list item) element.
<p>At GeoInquietos Madrid, we’re a community of</p>
<ul>
<li>cartographers</li>
<li>developers</li>
<li>GIS technicians</li>
<li>data journalists</li>
</ul>
<p>sharing our love for maps and OS geo-applications.</p>Links are very important — they are what makes the Web A WEB. To add a link, we need to use a simple element — — the a being short for "anchor".
<a href="http://geoinquietos.org/">GeoInquietos Web</a>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:
-
A set of properties, which have values set to update how the HTML content is displayed, for example I want my element's width to be 50% of its parent element, and its background to be red.
-
A selector, which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document.
A set of CSS rules contained within a stylesheet determines how a webpage should look.
Setting CSS properties to specific values is the core function of the CSS language. The CSS engine calculates which declarations apply to every single element of a page in order to appropriately lay it out and style it. What is important to remember is that both properties and values are case-sensitive in CSS. The property and value in each pair is separated by a colon (:).
Declarations are grouped in blocks, with each set of declarations being wrapped by an opening curly brace, ({) and a closing one (}).
Each declaration contained inside a declaration block has to be separated by a semi-colon (;), otherwise the code won't work (or will at least give unexpected results.)
We are missing one part of the puzzle — we need to discuss how to tell our declaration blocks which elements they should be applied to. This is done by prefixing each declaration block with a selector — a pattern that matches some elements on the page. The associated declarations will be applied to those elements only. The selector plus the declaration block is called a ruleset, or often simply just a rule.
This is the most common method of attaching CSS rules to an HTML document. With this method all of your style rules are contained in a single text file that is saved with the .CSS extension. This file is saved on your server and you link to it directly from each HTML file. The link is just a simple line of HTML that you put in the section of your HTML document, it looks like this:
<link rel="stylesheet" type="text/css" href="style.css">You can also embed CSS rules directly into any HTML page. To do this you need to add the following code to the of your HTML document:
<style type="text/css">
html, body, #map{
height: 100%;
padding: 0;
margin: 0;
}
</style>Style rules can also be added directly to any HTML element. To do this you simply add a style parameter to the element and enter your style rules as the value. Here is an example of a heading with red text and a black background:
<h2 style="color: red; background: black;">This is a red heading with a black background</h2>Another interesting way to add CSS to a HTML page is with the import rule. This lets us attach a new CSS file from within CSS itself. Let's look at an example of how this is done then I will show a practical example of when you might use this method. To import a new CSS file from within CSS simply use the following rule:
@import "newstyles.css";Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.
You can use Markdown most places around GitHub:
- Gists
- READMEs
- Comments in Issues and Pull Requests
- Files with the
.mdor.markdownextension
You can follow this guide with a Markdown sandbox application such as Dillinger or StackEdit.
- Bold: **hello** or __hello__ will be displayed as hello
- Italics: *hello* or _hello_ will be displayed as hello
- Links:
\[link to GitHub!\](http://github.com)will be displayed as link to GitHub!
> This is a quote.
This is a quote.
Headers start with #.
Sometimes you want numbered lists (1., 2., etc.):
- One
- Two
- Three
Sometimes you want bullet points (*):
- Start a line with a star
- Profit!
Alternatively (-),
- Dashes work just as well
- And if you have sub points, put two spaces before the dash or star:
- Like this
- And this
If you want to embed images, use the same syntax as link but with an exclamation sign before (!). So \!\[markdown\](https://github.com/GeoinquietosMadrid/webmapping/blob/master/img/markdown.png) will be displayed as:
There are many different ways to style code with GitHub's markdown. If you have inline code blocks, wrap them in backticks (`): var example = true. If you've got a longer block of code, you can indent with four spaces:
if (isAwesome){
return true
}
GitHub also supports something called code fencing, which allows for multiple lines without indentation (```):
if (isAwesome){
return true
}
And if you'd like to use syntax highlighting, include the language (javascript, sql, css, python...):
if (isAwesome){
return true
}- HTML, CSS and Markdown Wikipedia pages
- Mozilla Developer Network
- GitHub Guides
- Matthew James Taylor blog