Introduction to Web Development in HTML Web module day 1 IS 201

Where are we? 3 day module on HTML and CSS

Introduction: Why Are We Learning HTML? “Every 2 Days We Create As Much Information As We Did Up To 2003” -Eric Schmidt (Google CEO) HTML is the “main markup language for creating web pages and other information that can be displayed in a web browser.” - Wikipedia

Introduction: Why Are We Learning HTML? A fundamental form of communication that gives you a competitive advantage Even if you never do web designing: – Tweaking online material – s – Understanding how the web is structured gives you power: Scrapping Editing

How are we learning HTML? Code Academy – Hands-On = Exciting! – Life Long Learning Class – From scratch – Next Midterm: You will create a site from scratch – Key terms and concepts for midterm covered in Code academy instructions and in lecture

Code Academy Glossary Instruction Practice W3 Schools Project Let’s look at the instructions on Learning Suite Due October 28, 11:55 pm

HTML: What is it? The code you just created is part of the Hyper-Text Markup Language (HTML) – HTML: the primary markup language for displaying web pages and other information in a web browser Not a programming language – Doesn’t calculate totals – Doesn’t validate forms – Doesn’t access databases

HTML: Related Technologies Internet – Global system of interconnected computers and networks World Wide Web – Network of interlinked web pages (a.k.a. “hypertext documents”) Web browsers – Software used to read HTML documents and display content

It’s All About the Tags HTML simply defines (i.e. “marks up”) content Use white space, indentation

Editing Environments HTML consists of 256 ASCII characters Use ASCII text characters to edit pages – These save only text characters Good Editing Environments – Windows: Notepad++ – Mac: Textwrangler – Either: Brackets

Day 1 Code Academy Tags,,,,, Indentation (review at end) Nested lists style font-size color font-family background-color text-align

HTML Images Concept Shows image on page Syntax Examples When image file is on external site When image file is local (in same folder as html page)

HTML Links - Hyperlinks Concept Place text or an imaged on page you can click on to jump to, and jump to another document or location Syntax General Syntax what shows on webpage Syntax when destination is an external site ESPN Syntax when destination is a subpage Visit ESPN website Syntax for showing image on page that jumps to another page