IntroductionThe Task indicates the tool. No one language is better than any other. Some are more widely used or have a wider range of abilities, but no single language will complete every programming or web development task. We will start with HTML and then move into stylizing our work with CSS to expose ourselves to some of the concepts and ideas that a programer might work with.
|
|
In Unit 2 we mentioned Integrated Development Environments (IDE). For this unit we will be using and IDE called Atom. It is a text editor that is "modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file." At MEH we find that it is user friendly, easy to access and does everything we need.
|
HTML
HTML is a computer language and stands for HyperText Markup Language. It is the language used to create the websites you visit everyday. Its syntax provides a logical way to structure content for websites.
- A markup language a computer language that defines the structure and presentation of raw text. Markup languages work by surrounding raw text with information the computer can interpret, "marking it up" to be processed.
- Using HTML, the computer can interpret raw text that is wrapped in elements containing information about the type and structure of the information to be displayed in the browser. Elements are often nested inside one another
- HyperText is text displayed on a computer or device that provides access to other text through links, also known as “hyperlinks.”.
<Tags>
Self-closing Tags or Elements contain all the information the browser needs to render the element inside a single tag. Also, because they are single tag, they cannot wrap around raw text or other elements.
The line break element </br> is one example of a self-closing tag. You can use it anywhere within your HTML code. The result is a line break in the browser.
The line break element </br> is one example of a self-closing tag. You can use it anywhere within your HTML code. The result is a line break in the browser.
HTML's Basic Syntax:
Syntax is the rules of a language. Much like learning the languages of English, Mandarin or French, computer languages follow certain rules too. Below is a basic syntax for the language of HTML. You will first see
<!DOCTYPE html>
<html> <head> <title>Page Title</title> </head> <body> <h1>Hello World!</h1> </body> </html> |
|
<!DOCTYPE>
When you read a book or newspaper, your brain must first identify the text's language. If you can understand that language then you begin to interpret the text. Web browsers work in a similar way. They must know what language a document is written in before they can process it. You can let web browsers know that you are using HTML by starting your document with a document type declaration. The declaration looks like this <!DOCTYPE html> This declaration tells the browser what type of document to expect, along with what version of HTML is being used. <!DOCTYPE html> must be the first line of code in all of your HTML documents. If you don't use the declaration, your HTML code will likely still work (however, it may not forever) because HTML5 is currently yhe standard. In the future, however, a new standard will override HTML5. Future browsers may assume you're using a different language. That is why staying current on trends in computing is important and we assign Tech In The News Assignments. Keeping up with the world around you is always important, but even more so in a field that changes so quickly. To make sure your document is forever interpreted correctly, always include <!DOCTYPE html> at the very beginning of your HTML documents.
|
<html>
To create HTML structure and content, we must add opening and closing <html> tags, like so:
<!DOCTYPE html>
<html>
<!--Anything between the opening and closing tags will be interpreted as HTML code. Without these tags, it's possible that
browsers could incorrectly interpret your HTML code-->
</html>
<!DOCTYPE html>
<html>
<!--Anything between the opening and closing tags will be interpreted as HTML code. Without these tags, it's possible that
browsers could incorrectly interpret your HTML code-->
</html>
|
<head>
<title>
We can give the browser some information about the page by adding a <head> element. The <head> element contains the metadata for a web page. Metadata is information about the page that isn't displayed directly on the web page. The opening and closing head tags (<head></head>) typically appear as the first item after your first HTML tag. The browser can display the title of the page because the title can be specified directly inside of the <head> element, by using a <title> tag.
<!DOCTYPE html>
<html>
<head>
<title>
Mr. Erick's Page
<!--title of your page goes here. This will be displayed on the top of your browser-->
</title>
</head>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Mr. Erick's Page
<!--title of your page goes here. This will be displayed on the top of your browser-->
</title>
</head>
</html>
|
<body>
In order to add content that a browser will display, we have to add a <body> tag to the HTML file. Only content inside the opening and closing <body> tags can be displayed to the screen. Once the file has a body, many different types of content including text, images, and buttons can be added to the body.
We can give the browser some information about the page by adding a <head> element. The <head> element contains the metadata for a web page. Metadata is information about the page that isn't displayed directly on the web page. The opening and closing head tags (<head></head>) typically appear as the first item after your first HTML tag. The browser can display the title of the page because the title can be specified directly inside of the <head> element, by using a <title> tag.
<!DOCTYPE html>
<html>
<head>
<title>
Mr. Erick's Page
</title>
</head>
<body>
<!--this is the body of your page.
This is where you will create
what the user sees-->
</body>
</html>
We can give the browser some information about the page by adding a <head> element. The <head> element contains the metadata for a web page. Metadata is information about the page that isn't displayed directly on the web page. The opening and closing head tags (<head></head>) typically appear as the first item after your first HTML tag. The browser can display the title of the page because the title can be specified directly inside of the <head> element, by using a <title> tag.
<!DOCTYPE html>
<html>
<head>
<title>
Mr. Erick's Page
</title>
</head>
<body>
<!--this is the body of your page.
This is where you will create
what the user sees-->
</body>
</html>
Nesting Elements
When an element is contained inside another element, it is considered to be Nested This nested child element is said to be the child element and is nested inside of the parent element. HTML documents are organized as a collection of parent-child relationships. Since there can be multiple levels of nesting, this analogy can be extended to grandchildren, great-grandchildren and beyond. Let's look at an example:
<!DOCTYPE html>
<html>
<head>
<title>
Mr. Erick's Page
</title>
</head>
<body>
<div>
<h1>
Mr. Erick
</h1>
<p>
Mr. Erick was born in Buffalo NY and currently
teaches in Falls Church Virginia. He loves computer
science and the Buffalo BIlls.
</p>
<div>
</body>
</html>
In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p> elements are children of the <div> element. Because the <h1> and <p> elements are in the same level, they are considered siblings, and are both grandchildren of the <body> element. Understanding this hierarchy is important, because child elements can inherit attributes from their parent element.
<!DOCTYPE html>
<html>
<head>
<title>
Mr. Erick's Page
</title>
</head>
<body>
<div>
<h1>
Mr. Erick
</h1>
<p>
Mr. Erick was born in Buffalo NY and currently
teaches in Falls Church Virginia. He loves computer
science and the Buffalo BIlls.
</p>
<div>
</body>
</html>
In this example, the <body> element is the parent of the <div> element. Both the <h1> and <p> elements are children of the <div> element. Because the <h1> and <p> elements are in the same level, they are considered siblings, and are both grandchildren of the <body> element. Understanding this hierarchy is important, because child elements can inherit attributes from their parent element.
Organizing your code with Whitespace, Indentation and comments
As the code in an HTML file grows, it becomes increasingly difficult to keep track of how elements are related. Programmers use two tools to visualize the relationship between elements:whitespace and indentation. These tools take advantage of the fact that the position of elements in a browser is independent of the amount of whitespace or indentation in the index.html file. For example, if you wanted to increase the space between two paragraphs on your web page, you would not be able to accomplish this by adding space between the paragraph elements in the index.html file. The browser ignores whitespace in HTML files when it renders a web page, so it can be used as a tool to make code easier to read and follow. The second tool web developers use to make the structure of code easier to read is indentation. The World Wide Web Consortium, or W3C, is responsible for maintaining the style standards of HTML. They recommend 2 spaces of indentation when writing HTML code. Although your code will work without exactly two spaces, this standard is followed by the majority of professional web developers. Indentation is used to easily visualize which elements are nested within other elements.
HTML files also allow you to add comments to your code. Comments in HTML begin with <!-- and end with -->. Any characters in between will be ignored by your browser.
<!-- This is a comment that the browser will not display. -->
Adding comments in your code is helpful for many reasons:
- They help you (and others) understand your code if you decide to come back and review it at a much later date.
- They allow you to experiment with new code, without having to delete old code.
Adding Content
All content added to HTML webpages should be between opening and closing tags, such as the <body> tag. A tag and the content between it is called an HTML element. There are many tags that we can use to organize and display text and other types of elements.
Heading
Headings in HTML can be likened to headings in other types of media. Large headings like the front page of a newspaper are typically used to capture a reader's attention. Other times, Headings are used to describe content, like the title of a movie or an educational article. HTML follows a similar pattern. In HTML, there are six different headings, or heading elements. Headings can be used for a variety of purposes, like titling sections, articles, or other forms of content.
The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size.
The following is the list of heading elements available in HTML. They are ordered from largest to smallest in size.
- <h1> - used for main headings. All other smaller headings are used for subheadings.
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
Laying out your page <Div> and <Span>
<div> is primarily used to divide HTML documents into sections which can contain any text or other HTML elements.
<span> is primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections. They contain short pieces of text or other HTML.
<span> is primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections. They contain short pieces of text or other HTML.
Attributes are properties used to provide additional information about an element (sort of like an adjective or adverb in the english language). The most common attributes include the id attribute, which identifies an element; the class attribute, which classifies an element; the src attribute, which specifies a source for embeddable content; and the href attribute, which provides a hyperlink reference to a linked resource. Attributes are defined within the opening tag.
Class and ID Selectors
The class attribute specifies one or more classnames for an element. The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the html DOM) to make changes to html elements with a specified class.
CSS
Cascading-Style Sheet or CSS is not a programming language. It is a mark up language used with HTML to design the user interface of a website (the style is applied to the mark up language through out the same sections of similar parts)
CSS (Cascading Style Sheets) is a presentation language created to style the appearance of content (using, fonts or colors). The two languages (HTML & CSS) are independent of one another and should remain that way. CSS should not be written inside of an HTML document and vice versa. As a rule, HTML will always represent content, and CSS will always represent the appearance of that content.
|
|
Playgrounds and additional resources
JavaScript - Under Construction
JavaScript
George Boole
JavaScript is a programming language that adds interactivity to your website (for example: games, responses when buttons are pressed or data entered in forms, dynamic styling, animation).
|
|