Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-

Slides:

Advertisements

Similar presentations

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.

Advertisements

Unit 3 Day 4 FOCS – Web Design. No Journal Entry.

Creating and Editing a Web Page Using Inline Styles

Introducing HTML Skills: create simple Web pages

Skills: None Concepts: Text editor versus word processor, information, text file, code, ASCII This work is licensed under a Creative Commons Attribution-Noncommercial-Share.

Network applications Skills: none Concepts: client, server, automatic downloading of programs from Web servers, desktop or stand-alone application versus.

Creating hyperlinks with the tag Skills: using the tag IT concepts: tag, attribute This work is licensed under a Creative Commons Attribution-Noncommercial-Share.

Skills: edit, display the history of, discuss, and track changes to a page, wiki technique tips Concepts: Wiki operations This work is licensed under a.

Skills: create, modify and post to a blog Concepts: wire-frame diagram, independence of content and appearance, gadget or widget, Blogger menu structure.

Skills: include images in Web pages Concepts: tag, attribute, value, path (to a stored file) This work is licensed under a Creative Commons Attribution-Noncommercial-Share.

Using the Google Docs word processor Skills: getting a Google account, creating a text document and sharing it on the Internet Concepts: stand-alone applications.

Encoding images Skills: none IT concepts: an image representation code, the number of bits in a code, the amount of information in an image This work is.

Survey mechanics This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills: the mechanics of using a survey.

Retrieving compound pages This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills: none IT concepts:

HTML tags Skills: adding HTML tags, text editor IT concepts: plain text, computer components – storage versus memory, separation of content and format.

Many kinds of clients and servers This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills: none IT concepts:

Using Google Docs: a network-based word processor This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills:

Including images with the img tag Skills: using the img tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-

Introducing HTML Skills: none IT concepts: markup, HTML tag, presentation vs content, HTTP protocol, historical context This work is licensed under a Creative.

Posting to a blog Skills: Creating and editing a blog post IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-

Internet reading Skills: mindful reading IT concepts: characteristics of Internet readers This work is licensed under a Creative Commons Attribution-Noncommercial-

Copying Web images (the right mouse button is your friend) Skills: Copy a Web image, see the properties of a Web image, use the right mouse button IT concepts:

Using Wikispaces This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills: Wikispaces: editing and management.

Attributes of HTML tags Skills: none IT concepts: HTML tag, value, attribute This work is licensed under a Creative Commons Attribution-Noncommercial-

Including images in Web pages Skills: use the tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.

Data plus a code → information Skills: none IT concepts: text code This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.

Copying Web images Skills: Copy a Web image, see the properties of a Web image IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-

Creating hyperlinks with the a tag Skills: using the a tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial-

Filezilla Skills: install and use Filezilla IT concepts: client-server review, file transfer protocol (FTP), Web site mirror, portable software, open source.

Background survey This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License. Skills: none IT concepts: survey service,

A student’s first Web site – good news and bad news Skills: resize and compress images IT concepts: pixel, image processing operation, compression This.

 Definition of HTML Definition of HTML  Tags in HTML Tags in HTML  Creation of HTML document Creation of HTML document  Structure of HTML Structure.

Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.

Web Design Using HTML Codes. WHAT DO I NEED TO BEGIN DESIGNING A HOME PAGE? 1.YOU NEED A FOLDER (also called a DIRECTORY) You should set up a folder or.

Creating an Expression Web Site

Making an HTML Document Notepad Group Bo Kim Dan Carter Han Chong Justin Weaver Kris Lamont.

Basic HTML Hyper text markup Language. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element.

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.

Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'

Lecture 2 Building Web Pages 1 Lecture 2  Building Web pages  Languages and programs  HTML - Hyper Text Markup Language  Netscape’s Composer  MicroSoft.

15.1 Fundamentals of HTML.

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 I An Introduction to the Language of the Web Terry Bake

Putting Applets into Web Pages.  Two things are involved in the process of putting applets onto web pages ◦ The.class files of the applet ◦ The html.

Introduction to HTML Wah Yan College (Hong Kong) Mr. Li C.P.

Basic HTML Hyper text markup Language. Lesson Overview  In this lesson, you will learn to:  Write HTML code using a text editor application such as.

15.1 Fundamentals of HTML DeKalb County School System.

CPSC 203 Introduction to Computers Lab 66 By Jie Gao.

Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

15.1 Fundamentals of HTML 2 assignments: 1st—complete the worksheet. 2nd—create your first HTML web page following the directions in this PowerPoint where.

Landscaper 101. Time Code AMC AMCNET HELP!!! Where do you go for help? –Upper right corner has a ? for the online help –This presentation.

Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.

Building a Web Page. Create A New Folder  Right click on the desktop and select New / Folder  Name the folder playpen.

Creating and Editing a Web Page

This shows CIS17 and the first day introduction..

HTML Hyper Text Markup Language. The Basics u HTML documents contain “tags” which instruct the Browser software on how to present the information within.

Creating and Editing a Web Page Using Inline Styles

Creating Web Pages with Links, Images, and Embedded Style Sheets

Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.

Skills: none Concepts: client, server, service, upload, download, client-server application, Internet, hardware, software This work is licensed under a.

Using the Google Docs word processor Skills: familiarity with Google Docs, creating and sharing text document on the Internet Concepts: stand-alone applications.

Create a blog Skills: create, modify and post to a blog

Active Server Pages Computer Science 40S.

HTML HYPERTEXT MARKUP LANGUAGE.

Creating your first website

An Introduction to HTML Pages

Creating your first website

Presentation transcript:

Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License.

Where does this topic fit? Internet concepts –Applications –Technology –Implications Internet skills –Application development –Content creation

There are tools for creating Web sites that generate HTML for you – why learn HTML? Users –To be able to modify pages – for example adding a feature to a blog –To understand how the technology works in order to feel empowered and in control Developers –To be able to write programs that generate HTML

Use a text editor, not a word processer or HTML editor to do your assignments.

Notepad, a text editor Word, a word processor

Extra information in a.doc file A Web client would not understand this.

The Notepad text editor Notepad is included with Windows. Start > All programs > Accessories > Notepad

First, enter the text

Add the basic HTML tags

Save the file on your hard drive

Naming your HTML file Use the extension htm or html. Be careful to select All Files as the type.

Check to see the file was saved in the directory you selected Be sure the file has the extension.htm, not.txt.

Display the page with a Web client The content is correct, but not the presentation. Web clients run everything together. (Double click on the file name or use the File > Open command in the Web client).

Add the and tags

Save it on your hard drive then refresh using the Web client

Note that it re-wraps the text if the window is re-sized

Four tips

Notepad and a Web client side by side Simple debugging -- change the HTML, save it, and refresh the client.

HTML source for the Classes page on my Web site The browser View > Source command

The HTML tags are missing The composed page has line breaks HTML editors may be approximate

Before starting, turn off Windows extension hiding tools > folder options... > view uncheck You only have to do this one time.

A few questions

What difference would it make in our example if you accidently left of the paragraph closing tag ? What difference does it make if you add extra blank lines between two lines of text?

Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License.