Meteor is a platform for web development; as such it relies on the standard building blocks of the web. Before jumping into building an app with Meteor, it is important to cover what technologies we will be using. Readers familiar with web development may be able to skip this chapter, but for someone just getting started this chapter will lay the needed groundwork
HTML The Structure
HTML (HyperText Markup Language) is at the center of web development and is the starting point of every web page. HTML was created in the early 90s as a way to describe and share interlinking documents across the Internet. Although web technology and how we use it has evolved over the years HTML remains a cornerstone.
When we visit a page on the Internet our browser is sending a request to the server for an HTML document. These documents are simple text files and can be edited with any plain text editor. But they contain instructions that describe the structure of the content to a browser. This lets a browser display the content in a nice format and load any additional resources, such as images, that it may need.
Tags and Attributes
Elements are the basic unit in HTML and they are described using tags. An HTML element is a block of content that is wrapped with an opening tag and a matching closing tag that give meaning to the content. An example is the h1 tag that tells the browser that the content inside is a top-level header.
Hello World
You can recognize tags by the angle brackets <> that surround the tag name. Most tags have an opening and a closing tag. You can tell a tag is a closing tab because it will include a slash ( / ) inside of the angle brackets <> before the tag name. Here are a couple examples of opening tags and their closing tags:
One of the things that make HTML extremely flexible is the ability to nest elements. This means that each element can contain other elements in a tree-like structure. For example an ordered list can contain many items inside it.
By parsing this markup the browser can understand the content. The markup describes a list with two items in it, so the browser by default will show Item 1 and Item 2 on two lines with the number 1 next to the first item and the number 2 next to the second item. Later, we will learn how to change the default styles with CSS. Just using HTML, however, your browser can present the content in a meaningful way.
Tags give the browser a basic idea of what the content is, but you usually want to give it a little more information. This is done using attributes. Attributes are added to the opening tag and each tag can contain multiple attributes. Some tags even require specific attributes to work. A couple attributes can be used on any tag though. The most common are id and class . Lets take a look at an example.
As you can see in the example, attributes come after the tag name and are in the format name="value" . Multiple attributes are separated by a space.
The id attribute is used to give a name to a specific element. This means that in our example above, the list is named messages. Because an id identifies a specific element it should be unique and only used once in a document. Modern browsers do a really good job of dealing with invalid HTML, however, and the page will still load if you use an id in multiple places.
Classes are different from ids in that they can be used on multiple elements. In addition an element can also have multiple classes. Ids and elements have a one-to-one relationship while classes and elements have a many-to-many relationship. In order to add multiple classes to an element you pass a space-separated list as the value of the class attribute.
Now that we know the basic building blocks of an HTML document it is time to see how they are structured.
Document Basics
Every HTML document starts out with the same basic structure. Here is an example of the classic hello world example in HTML:
Hello World
Every HTML document starts with a DOCTYPE tag.
The doctype tells your browser what version of HTML it should expect. Over the years this has varied but with HTML5, the latest HTML standard, the doctype is simply HTML.
After the doctype, the entire document is wrapped in an html tag.
...
This gives your browser a root to start building its tree of elements from.
Inside the html tag you have two sections, head and body .
...
...
The head tag contains any information about the document that your browser needs to know but isnt part of the pages content. This usually includes meta tags used for SEO (Search Engine Optimization), link tags used to tell your browser where to find external style sheets, and script tags to either load an external JavaScript file or include some inline JavaScript. In our example we are only using the title tag, which is used to set the title on your browsers window or tab.
Below the head section we have the body . This is where we put the content for our page. In our simple example this only contains a single p (paragraph) tag wrapping the text Hello World.
Hello World
Web frameworks such as Meteor always produce this same structure but usually simplify the process so you dont have to create each page manually.
Common Tags
The browser has a set of standard tags that it understands. Here is a list of some of the most common HTML5 tags and when they should be used.
Link Tag (link)
Link tags tell the browser about an external resource, most commonly a stylesheet.
Style Tag (style)
The style tag is used to include inline CSS. In most cases you will put your styles in a separate file and include them in your HTML document using the link tag, but you will often see a style tag in examples and very simple documents.
body {
background-color: lemonchiffon;
}
Script Tag (script)
The script tag can be used to either include a JavaScript file from an external source or write inline JavaScript.
Or
alert("Hello World");
Heading Tags (h1, h2, h3, h4, h5, h6)
Heading tags are used to show up to six levels of document headings. The most important is h1 and the least is h6 . Default browser styles will show the content of each heading in different sizes with h1 being the largest and h6 the smallest. It is important to note that the heading tags and their levels play a role in SEO.
Most important
Less important
Least important
Paragraph Tag (p)
This tag wraps a paragraph of text as its name suggests.
Donec a massa a quam pellentesque sollicitudin. Donec condimentum egestas nisl ac imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Anchor Tag (a)
An anchor tag defines a hyperlink to another resource. This tag is what makes the Internet. In order to point the link at another document you have to set the href (HyperText Reference) attribute.