HTML Tags

HTML Tags

HTML Tags

Find the

html_tags/htmlTagsDemo.html 

file to follow along.

Full path:

April2015HTMLCSSworkshop/slides/html_tags/htmlTagsDemo.html

 

To uncomment lines in Sublime use: 

cmd+/

Link Element

<head>
  <link rel="stylesheet" type="text/css" href="theme.css" />
</head>
  • Used to link a document and an external resource such as a css stylesheet.
  • No closing Tag, notice the closing bracket has a "/".
  • Element-Specific Attributes:
    • rel: Specifies the relationship between the current document and the linked document
    • type: Specifies the media type of the linked document
    • href: Specifies the location of the linked document

HTML Tags

Self-Closing Tags

<br>
<embed>
<hr>
<img>
<input>
<link>
<meta> 
<param>
<source>
<wbr>

HTML Tags

  • These tags are special - they do not require corresponding end tags. Rather, they close themselves with a "/>"

Title Element

<head>
    <title>My Awesome Webpage!</title>
</head>
  • The <title> tag: 
    • ​defines a title in the browser toolbar 
    • provides a title for the page when it is added to favorites
    • displays a title for the page in search-engine results

HTML Tags

Script Element

<script type="text/javascript" src="someJavascript.js"></script>
<script type="text/javascript">
    console.log('This is javascript!');
</script>
  • The <script> tag is used to define a client-side script, such as a JavaScript.
  • The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
  • Element-Specific Attributes:
    • type:  Specifies the media type of the linked document, optional - defaults to text/javascript
    • src: Specifies the URL of the script file.

HTML Tags

Meta Element

<head>
  <meta name="description" content="HTML Slides" />
  <meta name="keywords" content="HTML,CSS" />
  <meta name="author" content="Eric Wainaina" />
</head>
  • The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable (Search engines.).
  • No closing Tag, notice the closing bracket has a "/".
  • Element-Specific Attributes:
    • name: Specifies a name for the metadata.
    • content: Gives the value associated with the name attribute.

HTML Tags

Meta Element

<head>
  <meta name="description" content="HTML Slides" />
  <meta name="keywords" content="HTML,CSS" />
  <meta name="author" content="Eric Wainaina" />
</head>

 

Metadata and SEO:

Use Metadata for keywords and descriptions that will urge a user to click on the link. Limit to 150/160 characters. Otherwise, the search engine will just grab some of the first text it finds on your site. Look at Google for some examples!

 

HTML Tags

Image Element

<img src="puppy.jpg" alt="a dog." width="640" height="480"/>
  • Good for dynamic (non static) images on a website.
  • Element-Specific Attributes:
    • src: Specifies the URL of an image.
    • alt: Specifies an alternate text for an image.
    • width: Specifies the width of an image.
    • height: Specifies the height of an image.

HTML Tags

Paragraph Element

<p>This is a paragraph.</p>
  • The <p> tag defines a paragraph.
  • Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).
  • No element specific attributes.

HTML Tags

Unordered Lists

<ul>
  <li>Item One</li>
  <li>Item Two</li>
</ul>
  • Use the <ul> tag together with the <li> tag to create unordered lists.
  • We declare an unordered list with the <ul> tag. We give the unordered list child <li> elements for each of the individual items in the list.
  • No element specific attributes. Can adjust with CSS.

HTML Tags

Ordered Lists

<ol start="20" type="i">
  <li>Item One</li>
  <li>Item Two</li>
</ol>
  • Use the <ol> tag together with the <li> tag to create ordered lists.
  • Similar to the <ul>, but has some specific attributes
  • Element-Specific Attributes:
    • ​start: specifies a start value for the list
    • type: specifies the kind of marker to use 

HTML Tags

Span Element

<p>
  The word <span style="color:blue">blue</span> is blue.
</p>
  • The span element has several uses but on its own provides no visual change.
  • The <span> tag is used to group inline-elements in a document.
  • The <span> tag provides a way to add a hook to a part of a text or a part of a document so we can modify them with css (stylesheets.).

HTML Tags

Div Elements

<div>
    <image src="cats.jpg" alt="a bunch of cats" />
    <p>Some paragraph about cats</p>
</div>
  • The <div> tag defines a division or a section in an HTML document.
  • The <div> tag is used to group block-elements to format them with CSS.
  • No element specific attributes.

HTML Tags

Anchor Elements

<a href="http://www.moringaschool.com">
    Visit Moringa School!
</a>
  • The <a> tag defines a hyperlink, which is used to link from one page to another.
  • The most important attribute of the <a> element is the href attribute, which indicates the link's destination. 
  • Attributes:
    • href: Specifies the location of the linked document.
    • target: Specifies whether or not to open in new tab

HTML Tags

Object Elements

<object width="400" height="400" data="helloworld.swf">
</object>
  • The <object> tag defines an embedded object within an HTML document. Use this element to embed multimedia (like audio, video, Java applets, ActiveX, PDF, and Flash) in your web pages.
  • Attributes:
    • data: Specifies the location of the linked data.

HTML Tags

Comment Tags

<!-- This is a comment -->

<!-- This is a
    multi-line
    comment! -->
  • The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.

HTML Tags

Made with Slides.com