Making Your Web Page Changing your Essay into a Web Page.

Slides:



Advertisements
Similar presentations
Table (TABLE) Contains TABLE ROWS (TR) Contains TABLE DATA (TD) Data can contain anything Text Lists Other tables Pictures …
Advertisements

HTML popo.
CSS. CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style.
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.
CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Introduction to HTML Lists, Images, and Links. Before We Begin Save another file in Notepad Save another file in Notepad Open your HTML, then do File>Save.
1 HTML Markup language – coded text is converted into formatted text by a web browser. Big chart on pg. 16—39. Tags usually come in pairs like – data Some.
13 February Building a Web Page. HTML Files Two types of information Text Instructions on how to display Instructions are in the form of tags Tags are.
Web Page Development Identify elements of a Web Page Start Notepad
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Web Program Development1 February 23, 2011 HTML Web Page Development Debbie Bartlett February 23, 2011.
Creating a Web Page HyperText Markup Language. HTML Documents  Created using any text editor  Notepad  Vi, Pico, or Emacs  If using word-processor,
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.
Introduction to HTML academy.zariba.com 1. Lecture Content 1.What is HTML? 2.The HTML Tag 3.Most popular HTML tags 2.
Introduction to HTML. What is a Web site? A collection of "pages" or files linked together and available on the World Wide Web What do you need to create.
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.
Creating Tables in a Web Site Using an External Style Sheet
HTML & CSS A brief introduction. OUTLINE 1.What is HTML? 2.What is CSS? 3.How are they used together? 4.Troubleshooting/Common problems 5.More resources.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Web Technologies Website Development Trade & Industrial Education
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
Website Development with Dreamweaver
Objectives: 1. Create a Skeleton HTML 2. View a Skeleton File Through a Server and Browser 3. Learn HTML Body Tags for the Display of Text and Graphics.
1 Basic HTML. 2 Part 1: Basic Web Page Production.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Web pages in Linux David Douglas Sam M. Walton College of Business, University of Arkansas.
CSS Basic (cascading style sheets)
CPT 123 Internet Skills Class Notes Publishing to the Web Session B.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.
HTML Lesson 3 Hyper Text Markup Language. Assignment Part 2  Set the file name as “FirstName2.htm”  Set the title as “FirstName LastName First Web Site”
HTML/XHTML Structure Building a basic web page using notepad.
HTML ( HYPER TEXT MARK UP LANGUAGE ). What is HTML HTML describes the content and format of web pages using tags. Ex. Title Tag: A title It’s the job.
CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor
Body and Heading Tags and their Attributes. Attribute Name DefinitionValues backgroundIndicates the background image of the Web page. Ex. Filename(path.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
Cascading Style Sheets Chris Vollmer IT 5610 Chatfield Senior High School.
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
Creating Tables in a Web Site HTML 4 Created by S. Cox.
1999, COMPUTER SCIENCE, BUU Introduction to HTML Seree Chinodom
Introduction lab1. Suzanne J. Sultan 2 What is HTML? The definition of HTML is Hyper Text Markup Language. HTML is a computer language devised to allow.
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
1 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph.
1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.
Project 02 Creating and Editing a Web Page Concept Map of Unit Creating and Editing a Web Page Key Learning Understand the elements to create a web page.
Revision Webpage design HTML.   FACE  Attributes  Marquee  Define the following terms.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
HTML AN INTRODUCTION TO WEB PAGE PROGRAMMING. INTRODUCTION TO HTML With HTML you can create your own Web site. HTML stands for Hyper Text Markup Language.
HTML is the language that allows text and graphics to be displayed as Web pages. It is a set of special codes, called tags, that tells a browser application.
INTRO TO WEB DEVELOPMENT html
Web Basics: HTML/CSS/JavaScript What are they?
HTML Basics.
What is HTML? Acronym for: HyperText Markup Language
LAB Work 01 MBA 61062: E-Commerce
HTML Images CS 1150 Spring 2017.
Computers and Scientific Thinking David Reed, Creighton University
Exam1 Review CSE111 B.Ramamurthy 2/17/2019 B.Ramamurthy.
HTML Images CS 1150 Fall 2016.
Web Design and Development
Introduction to HTML.
Computer communications
Presentation transcript:

Making Your Web Page Changing your Essay into a Web Page

The title should be found within the Head element Your title should include your name and your topic Your title does not have to be the same as the file name of your page

Attributes An attribute is something that modifies a tag’s default settings An attribute is placed inside the beginning tag and must have a value The attribute does not appear in the end tag <p style=“font-color:red; size:14px; family:arial”> stuff </p> <tag attribute=“value” attribute=“value” > stuff </tag>

Style=Background-Color Attribute The Background Color attribute is used in the tag The Background Color style attribute is used in the tag

ColorColor There are sixteen colors that are guaranteed to appear the same color in any browsercolor They can be labeled by name AquaGrayNavySilver BlackGreenOliveTeal BlueLimePurpleWhite FuchsiaMaroonRedYellow

ColorColor The whole palette can be described as mixes of three basic additive colors: REDGREENBLUE FFFFFF

ColorColor Each has 2 digit value on a 16 step scale A B C D E F REDGREENBLUE 00A5FF

ColorColor The 16 “web safe” colors labeled by NUMBER: 00FFFF C0C0C FF00FF FFFFFF FF00FF800000FF0000FFFF00

Image tags do NOT have end tags The Source Attribute _ src _ value is the picture’s FILE NAME –It MUST include the file Extention.jpg,.bmp,.tiff,.gif, etc. The image file must be in the same location as the.html document You may also want the Align AttributeAlign –Align=“right” or Align=“left” <img src=“harvested_trees.jpg” align=“right” /> <tag attribute=“value” attribute=“value” />

Links (three of them) The Tag is (for ANCHOR) You need an attribute to reference another file You need something in the body that will be the object you click on –Text –Picture <a href=“ HTML Help </a> <a href=“ </a>

An Example: If we do these things, there will be a lot to show for our efforts. There will be very little trash on the land. If all of this is done you can likely reduce the trash on the land by over half. The people who live in Onondaga County, New YorkOnondaga County reduced their trash by 64 percent by recycling. Land animals will live a better, safer life and the water will be cleaner for the sea life. Just one ton of recycled paper can save 17 trees. Also, you can’t see this but there will be cleaner air for us to breathe.

If we do these things, there will be a lot to show for our efforts. There will be very little trash on the land. If all of this is done you can likely reduce the trash on the land by over half. The people who live in Onondaga County, New York reduced their trash by 64 percent by recycling. Land animals will live a better, safer life and the water will be cleaner for the sea life. Just one ton of recycled paper can save 17 trees. Also, you can’t see this, but there will be cleaner air for us to breathe. The Code:

Bonus Points Unordered List1 point Ordered List1 point Each List Item.5 points Additional Links1 point Additional Images1 point Table1 point Each Row1 point Each Data Item.5 points Style Element1 point Style tags (p, h1, h2…)1 point Style Attributes.5 points

Adding a Style Sheet Adding a style sheet allows you to make format changes quickly and easily tag goes in the head Whatever your title is p {text-indent:10px; font-family:arial; color:red} h1 {text-align:center} What you type:

Tables and are the main tags Made up of Rows & Rows contain Data & You can have Headers for Rows and Data & and & Tables can be aligned left, right

Table with a picture and Caption Whatever your title is p {text-indent:10px; font- family:arial; color:red} h1 {text-align:center} What you see: Whatever your title is p {text-indent:10px; font- family:arial; color:red} h1 {text-align:center} What you type: