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

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

A guide to HTML. Slide 1 HTML: Hypertext Markup Language Pull down View, then Source, to see the HTML code. Slide 1.

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.

HTTP: the hypertext transfer protocol

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

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

COMPUTERS AND INFORMATION SYSTEMS HTML. How the Web Works To access a web site  Enter its address (URL) in the address box of your browser 

 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.

Creating a Simple Page: HTML Overview

1 Networks and the Internet A network is a structure linking computers together for the purpose of sharing resources such as printers and files Users typically.

Using HTML to Create a Basic Web Page… By Josh Gallagan.

Using HTML to Create a Basic Web Page… By Josh Gallagan.

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.

Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.

CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.

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.

Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 

Copyright 2006 South-Western/Thomson Learning Chapter 17 Creating and Linking Web Pages.

Course Content - Chapter 2 Introduction to HTML Introduction to a Text Editor as a web authoring tool Instructional Activity: Creating a webpage using.

G053 Lecture 12 Introduction To HTML Mr C Johnston ICT Teacher

Getting Started with HTML Please use speaker notes for additional information!

15.1 Fundamentals of HTML.

Web Page Creation Part I ST: Introduction to Web Interface Design Prof. Angela Guercio.

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.

Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.

Introduction to HTML. Slide 1 Hard-Coding What is hard-coding? –Creating the page in a text editor just using HTML A Web designer should know how to hard-

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

Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.

Introduction to web development and HTML MGMT 230 LAB.

INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.

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.

HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.

HTML file format  Lesson Objective: Understanding HTML and how it is used to create web pages.  Learning Outcome:  Create a HTML page by interpreting.

LBSC 690 Session 5A Programming. Languages How do we learn a language? Learn by listening Then reading Then writing How do we teach programming? Learn.

Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.

15.1 Fundamentals of HTML DeKalb County School System.

CPSC 203 Introduction to Computers Lab 66 By Jie Gao.

HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…..

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.

HTML HyperText Markup Language. Text Files An array of bytes stored on disk Each element of the array is a text character A text editor is a user program.

HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.

Chapter 27 Getting “Web-ified” (Web Applications) Clearly Visual Basic: Programming with Visual Basic nd Edition.

Lesson 2 – Unit B. Quick review 1. What is the name of the eGCC host that you ftp your files? 2. What type of software do you use to create and edit web.

HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”

This shows CIS17 and the first day introduction..

Hypertext Markup Language.  Developed by Tim Berners-Lee in 1990  Stands for HyperText Markup Languange  A format that tells a computer how to display.

1 2/16/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Intro to HTML and Basic Web Page Design.

The idea of adding markup instructions to documents is not new. Before computers, authors would make annotations by hand in their written or typed documents.

CPSC 203 Introduction to Computers Lab 23 By Jie Gao.

Behind every site is a mix of special languages that your web browser understands The main way of describing any website is HTML HTML stands for Hyper.

HTML-I Basic HTML Elements. HTML (Hyper Text Markup Language) HTML is a document layout and hyperlink- specification language. i.e. a language used to.

1 Introduction to HTML. 2 Definitions  W W W – World Wide Web.  HTML – HyperText Markup Language – The Language of Web Pages on the World Wide Web.

Introduction to HTML Dave Edsall IAGenWeb County Coordinator’s Conference June 30, 2007.

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.

Tutorial 1 Getting Started with Adobe Dreamweaver CS5.

1 Section 4 Web Skills InternetWebHTML. 2 The difference between the Internet and the Web The Internet is a way of linking large multi-user computers.

Online PD Basic HTML The Magic Of Web Pages

Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines

HTTP: the hypertext transfer protocol

HTML HYPERTEXT MARKUP LANGUAGE.

HTML Structure.

An Introduction to HTML Pages

Presentation transcript:

HTML tags Skills: adding HTML tags, text editor IT concepts: plain text, computer components – storage versus memory, separation of content and format This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike 3.0 License.

HTML tags What is HTML? The Notepad text editor Create an HTML document Tim Berners-Lee

What is HTML? Hypertext Markup Language HTML tags are added to Web documents to control their layout and appearance. Hypertext is non-linear – the reader can follow links, jumping from page to page. Linear text is read from start to finish. Hypertext systems predate the Web, but the Web caught on.

Same content, different layout and appearance

There are tools for creating Web sites that generate HTML for you – why learn HTML? Every user –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 We will not use an HTML generating tool, we will compose HTML documents using a plain text editor.

HTML tags What is HTML? The Notepad text editor Create an HTML document Tim Berners-Lee

The Notepad text editor Notepad is included with Windows. Notepad is in the Accessories program group. Start > All programs > Accessories > Notepad

Notepad versus Word Notepad – a plain text editor Word – a full word processor

Notepad versus Word

An ASCII example L a r r y My first name, Larry, would be encoded as follows: It requires only five bytes of memory or storage: Only the character codes are recorded.

Extra information in a.doc file This requires more memory or storage.

HTML tags What is HTML? The Notepad text editor Create an HTML document Tim Berners-Lee

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

Type in the text, then …

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 using a Web client But, I do not like the formatting – I want to add a heading and a paragraph break, so I must add some more HTML tags. View the page by double clicking on the file name or using the File > Open command in the Web client.

Add the … and tags

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

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

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

HTML tags What is HTML? The Notepad text editor Create an HTML document Tim Berners-Lee

Tim Berners-Lee invented HTML Tim Berners-Lee was knighted by Queen Elizabeth for his invention of the World Wide Web. He is shown here, along with the first picture posted on the Web and a screen shot from an early version of his Web browser.

Reference links A dozen tags to get starteddozen tags HTML tutorials with executable examplestutorials The original ASCII codeoriginal ASCII code