HTML & CSS
Lesson 1
Terminology, Syntax, & Introduction
Before beginning our journey to learn HTML and CSS it is important to understand the differences between the two languages, their syntax, and some common terminology. As an overview, HTML is a hyper text markup language created to give content structure and meaning. CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance. To put this into laymen terms, HTML determines the structure and meaning of content on a web page while CSS determines the style and appearance of this content. The two languages are independent of one another. CSS should not reside within an HTML document and vice versa. Taking this concept a bit further, the HTML When getting started with HTML you are likely to hear new, and often strange,terms. Over time you will become more and more familiar with all of them but three terms you should learn today include tags, elements, and attributes.p element is used to display a paragraph of text on a web page. The p element is specifically used here as it provides the most value for the content, thus being the most semantic element. CSS then uses a type selector of p which can determine the color, font size, font weight, and other stylistic properties of the paragraph. More on this to come.
Common HTML Terms
Elements
Elements are designators that define objects within a page, including structure and content. Some of the more popular elements include h1 through h6, p, a, div, span, strong, and em.
Tags
Elements are often made of multiple sets of tags, identified as opening and closing tags. Opening tags mark the beginning of an element, such as <div>. Closing tags mark the end of an element and begin with a forward slash, such as </div>.
Attributes
Attributes are properties used to provide additional instruction to given elements. More commonly, attributes are used to assign an id, class, or title to an element, to give media elements a source (src), or to provide a hyperlink reference (href).
HTML Document Structure & Syntax
All HTML documents have a required structure that includes the following declaration and tags: The The doctype, html, head, and body.doctype declaration is used to instruct web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Following the doctype declaration, html tags signify the beginning and end of the document.head of the document is used to outline any meta data, the document title, and links to any external files. Any context included within the head tags is not visible within the actual web page itself. All of the content visible within the web page will fall within the body tags.
A general HTML document structure looks like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a website.</p>
</body>
</html>Lesson 2
Elements & Semantics
With a basic understanding of HTML and CSS in hand it is time to dig a little deeper and see what actually assembles these two languages.
In order to start building web pages you need to learn a little about which HTML elements are used to display different types of content. You will also want to know how these different elements behave, to help ensure you achieve your desired outcome.
Additionally, once you begin writing code you want to make sure that you are doing so semantically. Writing semantic code includes keeping your code organized and making well informed decisions.
Divisions & Spans
Divisions, or divs, and spans are HTML elements that act as a container for different content. As a generic container they do not come with any overarching meaning or semantic value. Paragraphs are semantic in that when content is wrapped within a p element it is known as a paragraph. Divs and spans do not hold such meaning and are simply containers. Both divs and spans, however, are extremely valuable when building a website in that they give you the ability to apply targeted CSS styles.
A div is a block level element commonly used to identify large sections of a website, helping build the layout and design. A span on the other hand, is an inline element commonly used to identify smaller sections of text within a block level element, such as a paragraph.
Block vs. Inline Elements
All elements are either block or inline level elements. What’s the difference? Block level elements begin on a new line on a page and occupy the full available width. Block level elements may be nested inside one another, as well as wrap inline level elements. Inline level elements do not begin on a new line and fall into the normal flow of a document, maintaining their necessary width. Inline level elements cannot nest a block level element, however they can nest another inline level element.
Divs and spans can have added value when given a class or id. A class or id is typically added for styling purposes and to signify the difference between another For example, if you have a div or span. Choosing a class or id name is where semantics can come into play. When choosing a class or id attribute value it is important to choose something that has value to the actual context of that element.div with an orange background that contains social media links your first inclination might be to give the div a class of “orange.” What happens if that orange background is later changed to blue? Having a class of “orange” no longer makes sense. A better, more semantic, choice for a class would be “social” as it pertains to the contents of the div not the style.
Divs & Spans<!-- div -->
<div class="social">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<!-- span -->
<p>Lorem ipsum dolor sit amet, <span class="tooltip">consectetur</span> elit.</p>
Typography
A large amount of content online is strictly text based. Many different forms of media and context exist online, however text rules the majority. There are a number of different elements to display text on a web page within HTML. We will focus on the most popular, and more semantic, elements within this lesson. For a broader overview please see the Typography lesson (4).
Headings
Headings are block level elements that come in six different rankings, h1 through h6, and are key identifiers for users reading a page. Headings help to quickly break up content and provide hierarchy. They are also used to help search engines index and determine the value of content on a page.
Headings should be used in the order relevant to the content. The primary heading of a page or section should be coded with h1 and subsequent headings should use h2 on as necessary. Headings should be reserved for true classification and not used to make text bold or big.
<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>Headings Demo
This is a Level 1 Heading
This is a Level 2 Heading
This is a Level 3 Heading
Paragraphs
Headings are often followed with supporting paragraphs. Paragraphs are defined by using the p block level element. Numerous paragraphs can appear one after the other, adding information to a page.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
Paragraphs Demo
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Italicize Text with Emphasis
To italicize text and place a stressed emphasis on it the em inline level element is used. As with strong, there are two different tags used to italicize text, each with a slightly different semantic meaning. em semantically means to place a stressed emphasis on text and thus is the most popular option for italicizing text. The other option is i, which semantically values text to be rendered in an alternate voice. Again, you will need to gauge the significance of the text you want to italicize and choose an element accordingly.
<p>Quae ars <em>putanda</em> est, expeteretur si nih.</p>Italicize Text Demo
Quae ars putanda est, expeteretur si nih.
Hyperlinks
One of the core elements of the internet is the hyperlink, established by using an anchor. Hyperlinks are defined using the a inline element however they require a source to direct the link. The href attribute, known as hyperlink reference, is used to set the destination of a link.
By nature the a element is an inline element, however with the introduction of HTML5, a elements now have the ability to wrap block or inline level elements. This is a break from the standard convention yet permissible to turn entire blocks of content on a page into a link.
<a href="http://google.com">Shay</a>
No comments:
Post a Comment