J. Verlin Sophomore Seminar September 7 – October 2, 2017

Slides:



Advertisements
Similar presentations
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Advertisements

HTML Basics Customizing your site using the basics of HTML.
HTML popo.
Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.
Html: getting started HTML is hyper text markup language. It is what web browsers look at on the Internet. HTML documents should be created in a simple.
Creating and Editing a Web Page Using Inline Styles
Today’s Goals What is HTML?
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 1.
HTML and Web Page Design Presented by Frank H. Osborne, Ph. D. © 2005 ID 2950 Technology and the Young Child.
Adding HTML to Blackboard
CIS101 Introduction to Computing
Web Program Development1 February 23, 2011 HTML Web Page Development Debbie Bartlett February 23, 2011.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Understanding HTML Style Sheets. What is a style?  A style is a rule that defines the appearance and position of text and graphics. It may define the.
HTML. We’ll learn … What HTML is What tags are What a basic web page looks like What 3 HTML tags are required What HTML comments look like How to title.
PRESENTED BY: CARY-ANNE HTML AND WEB DESIGN. HTML Browsers Tags: What are they?, Common Tags Lists Links and Anchors Images DIVs Validation WHAT WE’LL.
Creating a Web page Using Basic HTML By: Magdalena Martinez CIEP 491 (W 6:00) Assessment #12.
THE BACKBONE OF EVERY WEB PAGE HTML Day 1. What will we learn? How to create a basic web page Backgrounds and colors How to link Web sites How to include.
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
Agenda9/11/13  Do Now  Display your name tag and log into your computer  Pre-Assessment Test  Info and Interests  Syllabus and Course Expectations.
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
HTML Hyper Text Markup Language. What is an HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup.
HTML INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.
All you ever needed to know…and more!. H.T.M.L. HyperText Mark-up Language Web’s programming language All web browsers Set of instructions Written with.
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
HTML. Hypertext Markup Language Lesson Objectives 1. We will be able to understand the need for HTML and where it is used 2. We will be edit HTML to.
Agenda9/11/13  Do Now  Display your name tag and log into your computer  Pre-Assessment Test  Info and Interests  Syllabus and Course Expectations.
CPSC 203 Introduction to Computers Lab 33 By Jie Gao.
Mr. Verlin South Philadelphia High School September 27, 2010.
Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.
CPSC 203 Introduction to Computers Lab 66 By Jie Gao.
CS 111 – Oct. 4 Web design –HTML –Javascript Commitment: –This week, read sections 4.3 – 4.5.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.
HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.
Landscaper 101. Time Code AMC AMCNET HELP!!! Where do you go for help? –Upper right corner has a ? for the online help –This presentation.
Creating Your Own Web Page Using HTML (HyperText Markup Language.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
HINDU STYLE PORTFOLIO TEMPLATE
This shows CIS17 and the first day introduction..
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
Creating and Editing a Web Page Using Inline Styles
Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.
HTML: Hypertext Markup Language The language to make web pages 0.
Creating Web Pages with Links, Images, and Embedded Style Sheets
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
INTRO TO WEB DEVELOPMENT html
Introduction to HTML:.
J. Verlin Computer Science September 7 – October 2, 2017
Extended Learning Module F
Internet Exploration: HTML Basics
HTML GUIDE Press F5 and then
Uppingham Community College
Creating a Home Page in HTML
HTML Formatting.
Cascading Style Sheets (CSS)
HTML Lesson 2.
HTML Basics and CSS style
Internet Exploration: HTML Basics
HTML.
HTML HYPERTEXT MARKUP LANGUAGE.
Intro to Web Development Homework Review
Presentation transcript:

J. Verlin Sophomore Seminar September 7 – October 2, 2017 Intro. To HTML and CSS J. Verlin Sophomore Seminar September 7 – October 2, 2017

Do Now: September 7, 2017 Open a web browser and browse out to http://www.google.com. Write the following on the slip provided and hand in when complete (10 classwork points): Your name and today’s date. An estimate of the number of lines of code needed to make the page.

September 7, 2017: Basic HTML Tags Objective: the students will be able to define what HTML is and how to use at least 5 of the tags in today’s do now to create a web page containing 5 2-line poems. Direct Instruction: <html>, <title>, <body>, <h1> and <p> tags. Guided Practice: “Write a Poem” challenge in Khan Academy Cooperative Practice: in pairs, create your own poems from scratch. It must be at least 5 lines and use at least 1 pair of each of the tags you learned today. Save the file as an HTML file when finished and open it in a web browser (30 classwork points).

Homework: due Sept. 8 Write another 5-line poem as you did in class today and save it as an HTML file. During the Do Now for next class, you will open these in a browser as I inspect your homework (10 homework points).

Do Now: September 8, 2017 Open the html file you created for homework in a browser. I will inspect.

Do Now: September 8, 2017 Quiz: on the slips provided, write your name, today’s date and the purpose of the following tags (3 quiz points): <h1> <p> <body>

September 8, 2017: Text Emphasis Objective: the students will be able to use the <strong> and <em> tags to boldface and italicize text in order to create a 2-line poem. Direct Instruction: boldfacing <strong>, italicizing <em>, bullets <ul> and numbered lists <li> Guided Practice: “...you can learn…” challenge Cooperative Practice: open Notepad and type “This is bold text and this is italics.” Use the appropriate tags to boldface the word “boldface” in the sentence and italicize “italics”. Save the file on the desktop using the html extension and open it in a browser to verify the formatting.

Homework: due September 11 In a text file, type a list of any 5 items. Apply the appropriate markup tags so that the items appear as a bulleted list when opened in a web browser. Save it as an HTML file on a flash drive or in your Google Drive account. During Monday’s Do Now, I will ask you to open these files in a browser so that I can inspect (10 homework points).

Do Now: September 8, 2017 Browse out to http://www.jverlin.com. Click on the “My CV” link. Highlight the entire resume. Right click and select the Copy command. Create a new page on your Google site “My Resume” Right click on the page and select the Paste command.

September 8, 2017: Resumes Objective: the students will be able to write a resume in order to establish a presence on the internet. Direct Instruction: templates and formatting Independent Practice: edit the resume to suit your needs (30 classwork points) Take out the sections which don’t apply. Change those that do as appropriate.

Unit Project: End Product Example

Unit Project: Blog Objective: the students will be able to change the font families, styles and sizes on a web page in order to create a blog. Direct Instruction: Sample Blog Project Requirements Must contain at least 3 blog posts Must have a table of contents which links the posts Must have 3 CSS rules Must use at least 4 different CSS properties which start with font- Must not have any errors or bad practices Due Date: October 6 (50 project points)