Getting started with HTML and CSS

☕ Tutorials
What is Dreamweaver?, video by Adobe – Go to it now!
Anatomy of a website by Adobe – Go to it now!
HTML tutorial by Adobe – Go to it now!
Full list of tutorials for Adobe Dreamweaver CC – Go to it now!

Related Pages
Getting started with CSS
View basic HTML page with no CSS
View HTML page with CSS styling, created with Bootstrap in Adobe Dreamweaver CC
View basic web design, responsive

 

Getting Started with HTMl, CSS

HTML and CSS Brief Overview
Hypertext Markup Language, HTML, and Cascading Style Sheets, CSS, are the building blocks web pages. HTML provides the structure of the page, while CSS the visual layout for devices. Web pages would not exist without HTML and CSS, and is usually goes unseen, except for web designers.

Hypertext Markup Language (HTML), short description
A language for describing web pages consists of plain text.

See a list of all HTML tags in alphabetical order at w3schools.com.

Cascading Style Sheets (CSS), short description
A language used to describe the design of HTML.

See what’s hiding behind this webpage

Do you know what’s lurking being this web page or any web page?  You can look at any time!  
What you are currently looking at is the visual part of Hyper Text Markup Language, HTML, page. If you want to see what’s hidden behind this page in the actual source code, you can simply press Ctrl+U (Windows) or Command ⌘-Option + U (Mac). Mac users:  Sometimes you need Command ⌘ + U will work.   Experiment with the web browser you are using.

Applications for working with HTML, CSS

Applications like Adobe Dreamweaver and text editors, Text Wrangler, for Mac Users, and Sublime, Mac and PC users, are used for working with HTML, CSS and web design.

History of HTML

Tim Berner-Lee invented HTML and the first web browser (Safari, Firefox, Opera and more)  in 1989 when he was working as a computer scientist  at the European Council for Nuclear Research, CERN, in Geneva Switzerland.  Berner-Lee originally invented HTML for sharing technical papers in the scientific community.

If you are reading this on a web page, meaning you didn’t print this on paper,  there is HTML, the building blocks of web pages, found in all mobile devices, tablets, laptop and desktop computers.

HTML Tags

  • There has been several version of HTML, with the latest version, HTML5.
  • There are over 120 tags, with the most basic as HTML, head, body, h1, p and more.
  • Angle brackets (< and >) are used to help identify tags, also open and close a tag.  Tags are used for mark up or used to identify text, images, graphics and more on a web page.  

Learn more about HTML at w3schools.com.
  • Tags create distinct objects, formatting, identify content and generate activity.
  • Pairs – Most tags have an opening and closing tag.
    <title>. . .</title> Title tag pair
<p>. . .</p> Paragraph tag pair
    <h1>. . .</h1> Headline 1 tag pair
    <br>  Break tag only uses one tag.Basic HTML code structure

    The basic structure of a webpage is made up mainly three parts.
  • Root <html>. . .</html>
  • Head <head>. . .</head>
  • Body <body>. . .</body>

What you see, don’t see on HTML page

  • Body – The only text or content, such as images, video and more, that will display on a web page is found in the Body.
  • HTML – The HTML start and end and web page and Head generally had hidden code.

View basic HTML, HTML page with CSS
There are examples of what an HTML page looks like with no CSS styling, and another with CSS and designed with Bootstrap, an open source application now part of Adobe Dreamweaver CC.

  • View a basic HTML page with no CSS.
  • View an HTML page with CSS, designed with Bootstrap, an integrated application in Adobe Dreamweaver CC.

Frequently used tags

Full list of all HTML tags in alphabetical order

Short list of frequently used HTML Tags
Tag  and Description

  • <!–…–>
    Comment – Describes HTML Comment.  You can add notes in the HTML code, but it won’t display in browser for readers.  Proceed with caution with this!
  • <a>
    Anchor – This is a basic item used for hyperlinks.
  • <article>
    Article – Designates independent, self-contained content, distributed separately from the rest of the site.
  • <aside>
    Aside – A sidebar for content related to the surrounding content
  • <audio>
    Audio – Multimedia content, sound, music, audio streams
  • <blockquote>
    Quotation – This will make an indented, standalone paragraph.  Not just for quotes.
  • <body>
    Body – Designates the body of an HTML page.  This is visible content of  webpage.
  • <br>
    Break – Inserts a break in a line without starting a new paragraph
  • <canvas>
    Canvas – Designates graphics content create using script
  • <div> 
    Division – Used to divide webpages into sections.
  • <em>
    Emphasis – Displays as italics by default in most browsers.
  • <figure>
    Figure – Standalone content containing an image or video.
  • <figcaption>
    Caption – Designates a caption for a <figure> element.
  • <footer>
    Footer – Designates a footer of a document or section.
  • <form> 
    Form – Designates an HTML form, found on Contact page and more.
  • <h1> to <h6>
    Headings – Creates headings, h1 is  largest, and h6 is smallest.
  • <head>
    Head – Describes the content head.  Contains code that performs background functions:  Meta tags, scripts, styling, links and more info not overtly visible to visitors.
  • <header>
    Header – Designates the introduction of a document or section.
  • <hr>
    Horizontal Rule – This is an empty element that creates a horizontal line.
  • <html>
    HTML – Root element of most webpages.  Contains the entire webpage.
  • <iframe>
    Inline Frame – A structural element that can contain another document, link a video.
  • <img>
    Image – Provides the source reference to display an image.
  • <input>
    Input – An element for a form such as a text text field.
  • <li> 
    List item – The content of a HTML list.
  • <link>  
    Link     – Designates relation between a document and an external source.
  • <meta>  
    Metadata     – Additional information used by search engines and other applications.
  • <ol>    Ordered list – Defines a numbered list.  List item display in a numbered sequence.
  • <p>
    Paragraph – Designates a standalone paragraph.
    <script>
     Script – Contains scripting elements or points to an internal or external script.
  • <section>
    Section – Designates a section in a document.
  • <source>
    Source – Designates media resources for media elements.
  • <span>
    Span – The <span> tag is used to group inline-elements in a document
  • <strong>
    Strong – Displays as bold by default in most browsers and readers.
  • <style>
    Style – Embedded or line reference for CSS styling.
  • <table>  
    Table – Designates an HTML table.
  • <td> 
    Table Data – Designates a table cell.
  • <textarea>
    Text area  – Designates a multi-line text input element for a form.
  • <th> 
    Table Header – Identifies a cell as containing a header.
  • <title>
    Title – Contains the metadata title reference for the current page.
  • <tr>
    Table Row – Structural element  that delineates one row of a table from another.
  • <ul>
    Unordered List – Defined a bulleted list.  List items display with bullets by default.
  • <video>
    Video – Designates video content, movie clip or other video streams.

Items to commit to memory

 – Highly recommended!
(You will be see these tags in almost all HTML pages.)

  • <html>. . . </html>
    HTML – Root element of most webpages.  Contains the entire webpage. <html>. . .</html>
    Learn more about the HTML tag HTML tag at w3schools.com.
  • <head> . . .</head>
    Head – Describes the content head.  Contains code that performs background functions:  Meta tags, scripts, styling, links and more info not overtly visible to visitors.
    Lean more about the Head tag at w3schols.com.
  • <title>. . . </title>

    Title – Contains the metadata title reference for the current page.
  Learn more about the Title tag w3schols.com.
  • <body> </body>
    Body – Designates the body of an HTML page.  This is visible content of webpage.
  Learn more about the Body tag at w3schols.com.
  • <p>. .  .</p>
    Paragraph – Designates a standalone paragraph.
    Learn more about the Paragraph tag at w3schols.com.
  • <img src=”” /> *
    Image – Provides the source reference to display an image.
    Example:  <img src=”smiley.gif” alt=”Smiley face” height=”42″ width=”42″>
    Lean more about the Image tag at w3schols.com.
  • <a href=””> </a> ** 
    Anchor – This  is a basic item used for hyperlinks.
    Example:  <a href=”http://www.w3schools.com”>Visit W3Schools</a>
    Learn more about the Anchor tag at w3schols.com.
  • View more details about tags and HTML at the original source by Mindy McAdams.

 

HTML Characters, Symbols

View a list of characters you can create with HTML.
View a list of symbols you might include in your HTML page.

Examples  – Use lists above to create characters, symbols                
©                     Copyright symbol        ©
Bullet             bullet for list             •
–                       En dash                     –
☎                     Telephone             ☎  ☎
♥                       Heart                      ♥  ♥
☕                      Hot drink/coffee  ☕   ☕

 

HTML Summary

HTML – HTML is a plain-text language that requires any text editor, such as Adobe Dreamweaver, Text Wrangler, Sublime Text and can be view in web browser.  If you want to see what’s hidden behind this page in the actual source code, you can simply press Ctrl+U (Windows) or ⌘-Option-U (Mac).

Markup Language – A markup language places tags contained in angled brackets (< >) around plain text in order to pass information  about structure and formatting from one application to another.

Tags – HTML 5, the most current version of HTML, has more than 100 tags.  HTML5 was adopted in 2014.  Full support might take several years as some browsers and devices support specific versions of HTML.

Webpages – Most webpages have three main sections:  Root, head and body.

 

Links