Meet Some #LadyDevs – Basic Tags – Basic HTML Best Practices

View Github Repository Open presentation in a new window

KansasCityWomeninTechnology

See all presentation from KansasCityWomeninTechnology

Meet Some #LadyDevs – Basic Tags – Basic HTML Best Practices

1 0

IntroToHTMLAndCSS

2016 Session 1 presentation

On Github KansasCityWomeninTechnology / IntroToHTMLAndCSS

Intro to HTML & CSS

Presentation available at: http://kansascitywomenintechnology.github.io/IntroToHTMLAndCSS

Meet Some #LadyDevs

Laura Shields

Software Engineer, The Nerdery - Chicago

"Tangible dates lead to tangible results. 'Someday' leads to regret. Plan your dreams now. With spreadsheets."

Read more about Laura on the Nerdery's Blog!

J. Alisa Duncan

Senior Software Engineer, Engaged Technologies - Kansas City

... And Your Mentors for Tonight!

Tonight's Agenda: HTML & CSS

Review Last Session Overview of HTML/CSS Begin Your First Project

Last Time. . . .

We talked about tools for your #LadyDev toolbelt:

Developer Tools in Chrome - for troubleshooting and exploring elements Sublime Text - your text editor GitHub - where you can store and share your work
And so we begin. . .

What is HTML?

Hyper Text Markup Language

***

HTML is used for the placement or meaning of the content - header, paragraph, list versus its style (font, color, font size)

***

Text is marked with a "tag" that gives it a purpose

Meta Data

Meta Data is invisible to the reader but gives the browser important information about how to interpret the HTML on the page.

<!DOCTYPE html>
      <html>
          <head>Meta Data Goes Here </head>
          <title>Brower tab title here </title>
              <body>
                <h1>My First Heading</h1>
                <p>This is the first paragraph. All visible page content is nested inside the opening and closing body tags.</p>

              </body>
          </html>

Basic Tags

Paragraph:

<p> content goes here </p>

Headings (1-6):

<h3> header content goes here </h3>

Ordered lists:

<ol> <--"ol" designates the start of an ordered list
                <li>list item 1 here</li>                                              
                <li>list item 2 here</li>
                <li>list item 3 here</li>
                the closing tag marks the end of the list:--> </ol>

Basic Tags

Hyperlink:

<a href="www.url.com"> URL Name </a>

Images:

<img src="location/imgname.jpg" alt="image name">

Image with Hyperlink:

<a href="www.URL.com"><img border="0" src="location/LL-53.jpg" width="300" height="404" alt="Alternate Name"</a>

Note: For details or more examples, start with your handout and then use W3Schools' tutorial as a desk reference.

Inline Formatting

Inline formatting specifies the look of the element. While it can be done in HTML, it should be done in CSS whenever possible because it is easier to maintain.

<h3 style="color:blue;"> My Title Should Be Blue </h3>

becomes. . .

My Title Should Be Blue

Basic HTML Best Practices

Close every tag you open: <p></p> Be case sensitive/be consistent: <p></p> not <H3></h3> Indent nested tags (such as when indenting ordered lists): 
                      <ol>
                        <li>list item 1.</li>
                        <li>list item 2.</li>
                      </ol>;

Basic HTML Best Practices

A Couple of Final Thoughts about HTML . . .

Don't try to mash your code together. Use enough line breaks for readability and clarity.

***

Validate often - save your work and see how it looks in-browser as you progress.

***

Next: Debugging!

Debugging Tools and Online Documentation

There are many tools you can use. Some are built into your text editor and some are separate. Here are some resources.

Lets Look at an example:
Told in a Garden

Time to Practice!

CSS Overview

Cascading Style Sheets (CSS) ***

CSS does the heavy lifting with regard to the page formatting. ***

CSS controls how elements look, including font color, size, and other details that pertain to all elements in an HTML document that are the same type.

CSS Syntax Basics

Vocabulary
Element - a bit of HTML to be manipulated, like a paragraph (<p></p>) Selector - picks out, or selects, the HTML element to be styled. Property - describes how an element is modified, i.e. color, size, or font Value - the specific application of the property, i.e. red, 12 pt, or Times New Roman

Basic CSS Rule Syntax

Image Credit:

LearnWebCode.com

CSS Syntax Basics

Vocabulary (Continued)
Class selector - helps to style different elements in the same way. Syntax is .class ID selector - specifies to an even greater level of detail a specific element. Syntax is #id

Selectors

Image Credit:

Fiercegirldesign.com

The Box Model

Box model - a visual frame of reference for margins around elements

Connecting Your HTML Code to Your CSS Stylesheet

The Meta Data Section of your HTML doc tells the browser to look for a corresponding stylesheet:

        <!DOCTYPE html>
        <html>
          <head>
          <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
            <title>Page Title</title>
          </head>
          <body>
          <h3>heading content</h3>
          <p>Some Content here</p>
          </body>
        </html>

Connecting Your HTML Code to Your CSS Stylesheet

The CSS Stylesheet (href="stylesheet.css" in the previous slide) describes how the heading and paragraph will look:

body {
  background-color: #b7d1c4
}

h3 {
  font-family: Verdana;
  font-weight: bold;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
  color: #acd1b2;
}

Practice with CSS

2016 Coding & Cocktails Project

Where Do We Go From Here?

Next month: Introduction To Command Line

March: GitHub Basics

In the Mean Time...

Choose an online tutorial and work through it Work on your web page Join our Slack channel and use it whenever you have questions or get stuck!

Questions?