SlideShare a Scribd company logo

HTML and CSS Basics

•Download as PPTX, PDF•
•
Lindsey Meadows
Lindsey Meadows

The document provides an overview of HTML and CSS, including: - HTML gives content structure and meaning using elements like headings and paragraphs, while CSS is used to style the appearance of content. - Common HTML terms are explained, like elements, tags, opening/closing tags, and attributes. - The basic structure of an HTML document is outlined, including the <!DOCTYPE html>, <html>, <head>, and <body> elements. - Self-closing elements are discussed, which use a single tag like <meta>.

Related slideshows

Presentation on html, css
Presentation on html, cssPresentation on html, css
Presentation on html, css
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 
1 of 16
HTML &CSS 101 www.meadowsresources.com 713.352.3691 lindsey@meadowsresources.com
What is HTML &CSS  HTML, HyperText Markup Language, gives content structure and meaning by defining that content as, for example, headings, paragraphs, or images. CSS, or Cascading Style Sheets, is a presentation language created to style the appearance of content—using, for example, fonts or colors.  The two languages—HTML and 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.
Common Terms  Elements – A designator that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings (identified as <h1> through <h6> elements) and paragraphs (identified as the <p> element); the list goes on to include the <a>, <div>, <span>, <strong>, and <em> elements, and many more.
Common Terms  Tags -The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag.Tags most commonly occur in pairs of opening and closing tags.The content that falls between the opening and closing tags is the content of that element. An anchor link, for example, will have an opening tag of <a> and a closing tag of </a>.What falls between these two tags will be the content of the anchor link.  OpeningTag - An opening tag marks the beginning of an element. It consists of a less-than sign followed by an element’s name, and then ends with a greater-than sign; for example, <div>.  ClosingTag - marks the end of an element. It consists of a less-than sign followed by a forward slash and the element’s name, and then ends with a greater-than sign; for example, </div>.
Common Terms  Attributes - Properties used to provide additional information about an element.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, after an element’s name. Generally attributes include a name and a value.The format for these attributes consists of the attribute name followed by an equals sign and then a quoted attribute value.
Demo  The preceding code will display the text “Meadows Resources” on the web page and will take users to http://meadowsresources.com/ upon clicking the “Meadows Resources” text.The anchor element is declared with the opening <a> and closing </a> tags encompassing the text, and the hyperlink reference attribute and value are declared with href="http://meadowsresources.com" in the opening tag.
Demo <a href=“http://meadowsresources.com/>”Meadows Resources </a> Element Attribute Tag
HTML Document Structure HTML documents are plain text documents saved with an .html file extension rather than a .txt file extension.To begin writing HTML, you first need a plain text editor that you are comfortable using. Sadly this does not include MicrosoftWord or Pages, as those are rich text editors.Two of the more popular plain text editors for writing HTML and CSS are Dreamweaver and SublimeText. Free alternatives also include Notepad++ forWindows andTextWrangler for Mac. All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head>, and <body>.
HTML Document Structure The document type declaration, or <!DOCTYPE html>, informs web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Because we’ll be using the latest version of HTML, our document type declaration is simply <!DOCTYPE html>. Following the document type declaration, the <html> element signifies the beginning of the document.
HTML Document Structure Inside the <html> element, the <head> element identifies the top of the document, including any metadata (accompanying information about the page).The content inside the <head> element is not displayed on the web page itself. Instead, it may include the document title (which is displayed on the title bar in the browser window), links to any external files, or any other beneficial metadata. All of the visible content within the web page will fall within the <body> element.
HTML Document Structure The preceding code shows the document beginning with the document type declaration, <!DOCTYPE html>, followed directly by the <html> element. Inside the <html> element come the <head> and <body> elements.The <head> element includes the character encoding of the page via the <meta charset="utf-8"> tag and the title of the document via the <title> element.The <body> element includes a heading via the <h1> element and a paragraph via the <p> element. Because both the heading and paragraph are nested within the <body> element, they are visible on the web page.
HTML Document Structure When an element is placed inside of another element, also known as nested, it is a good idea to indent that element to keep the document structure well organized and legible. In the previous code, both the <head> and <body> elements were nested—and indented—inside the <html> element.The pattern of indenting for elements continues as new elements are added inside the <head> and <body> elements.
SelfClosing Elements In the previous example, the <meta> element had only one tag and didn’t include a closing tag. Fear not, this was intentional. Not all elements consist of opening and closing tags. Some elements simply receive their content or behavior from attributes within a single tag.The <meta> element is one of these elements.The content of the previous <meta> element is assigned with the use of the charset attribute and value. Other common self closing elements include: <br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>
ProTip The structure outlined here, making use of the <!DOCTYPE html> document type and <html>, <head>, and <body> elements, is quite common.We’ll want to keep this document structure handy, as we’ll be using it often as we create new HTML documents.
Code Validation No matter how careful we are when writing our code, we will inevitably make mistakes.Thankfully, when writing HTML and CSS we have validators to check our work.TheW3C has built both HTML and CSS validators that will scan code for mistakes.Validating our code not only helps it render properly across all browsers, but also helps teach us the best practices for writing code.
Thank you www.meadowsresources.com 713.352.3691 lindsey@meadowsresources.com

More Related Content

HTML and CSS Basics

  • 2. What is HTML &CSS  HTML, HyperText Markup Language, gives content structure and meaning by defining that content as, for example, headings, paragraphs, or images. CSS, or Cascading Style Sheets, is a presentation language created to style the appearance of content—using, for example, fonts or colors.  The two languages—HTML and 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.
  • 3. Common Terms  Elements – A designator that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings (identified as <h1> through <h6> elements) and paragraphs (identified as the <p> element); the list goes on to include the <a>, <div>, <span>, <strong>, and <em> elements, and many more.
  • 4. Common Terms  Tags -The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag.Tags most commonly occur in pairs of opening and closing tags.The content that falls between the opening and closing tags is the content of that element. An anchor link, for example, will have an opening tag of <a> and a closing tag of </a>.What falls between these two tags will be the content of the anchor link.  OpeningTag - An opening tag marks the beginning of an element. It consists of a less-than sign followed by an element’s name, and then ends with a greater-than sign; for example, <div>.  ClosingTag - marks the end of an element. It consists of a less-than sign followed by a forward slash and the element’s name, and then ends with a greater-than sign; for example, </div>.
  • 5. Common Terms  Attributes - Properties used to provide additional information about an element.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, after an element’s name. Generally attributes include a name and a value.The format for these attributes consists of the attribute name followed by an equals sign and then a quoted attribute value.
  • 6. Demo  The preceding code will display the text “Meadows Resources” on the web page and will take users to http://meadowsresources.com/ upon clicking the “Meadows Resources” text.The anchor element is declared with the opening <a> and closing </a> tags encompassing the text, and the hyperlink reference attribute and value are declared with href="http://meadowsresources.com" in the opening tag.
  • 7. Demo <a href=“http://meadowsresources.com/>”Meadows Resources </a> Element Attribute Tag
  • 8. HTML Document Structure HTML documents are plain text documents saved with an .html file extension rather than a .txt file extension.To begin writing HTML, you first need a plain text editor that you are comfortable using. Sadly this does not include MicrosoftWord or Pages, as those are rich text editors.Two of the more popular plain text editors for writing HTML and CSS are Dreamweaver and SublimeText. Free alternatives also include Notepad++ forWindows andTextWrangler for Mac. All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head>, and <body>.
  • 9. HTML Document Structure The document type declaration, or <!DOCTYPE html>, informs web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Because we’ll be using the latest version of HTML, our document type declaration is simply <!DOCTYPE html>. Following the document type declaration, the <html> element signifies the beginning of the document.
  • 10. HTML Document Structure Inside the <html> element, the <head> element identifies the top of the document, including any metadata (accompanying information about the page).The content inside the <head> element is not displayed on the web page itself. Instead, it may include the document title (which is displayed on the title bar in the browser window), links to any external files, or any other beneficial metadata. All of the visible content within the web page will fall within the <body> element.
  • 11. HTML Document Structure The preceding code shows the document beginning with the document type declaration, <!DOCTYPE html>, followed directly by the <html> element. Inside the <html> element come the <head> and <body> elements.The <head> element includes the character encoding of the page via the <meta charset="utf-8"> tag and the title of the document via the <title> element.The <body> element includes a heading via the <h1> element and a paragraph via the <p> element. Because both the heading and paragraph are nested within the <body> element, they are visible on the web page.
  • 12. HTML Document Structure When an element is placed inside of another element, also known as nested, it is a good idea to indent that element to keep the document structure well organized and legible. In the previous code, both the <head> and <body> elements were nested—and indented—inside the <html> element.The pattern of indenting for elements continues as new elements are added inside the <head> and <body> elements.
  • 13. SelfClosing Elements In the previous example, the <meta> element had only one tag and didn’t include a closing tag. Fear not, this was intentional. Not all elements consist of opening and closing tags. Some elements simply receive their content or behavior from attributes within a single tag.The <meta> element is one of these elements.The content of the previous <meta> element is assigned with the use of the charset attribute and value. Other common self closing elements include: <br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>
  • 14. ProTip The structure outlined here, making use of the <!DOCTYPE html> document type and <html>, <head>, and <body> elements, is quite common.We’ll want to keep this document structure handy, as we’ll be using it often as we create new HTML documents.
  • 15. Code Validation No matter how careful we are when writing our code, we will inevitably make mistakes.Thankfully, when writing HTML and CSS we have validators to check our work.TheW3C has built both HTML and CSS validators that will scan code for mistakes.Validating our code not only helps it render properly across all browsers, but also helps teach us the best practices for writing code.