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

Slides:



Advertisements
Similar presentations
Chapter 1: Introduction. Contents Whats New in Dreamweaver CS4? The Dreamweaver CS4 Interface Setting Up a Site Creating a Web Page Adding Text to Your.
Advertisements

Learning the Basics – Lesson 1
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
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.
Project 8 Creating Style Sheets.
Creating and Editing a Web Page Using Inline Styles
Microsoft Expression Web-Illustrated Unit L: Using Code Tools.
Web Page Development Identify elements of a Web Page Start Notepad
Creating an HTML page Skills: edit and debug HTML pages IT concepts: text editor This work is licensed under a Creative Commons Attribution-Noncommercial-
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.
 Definition of HTML Definition of HTML  Tags in HTML Tags in HTML  Creation of HTML document Creation of HTML document  Structure of HTML Structure.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Creating a Web Page HTML, FrontPage, Word, Composer.
Getting Started with Expression Web 3
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where.
Website Design CLA – Transportation. Defining a Site Select: Site – New - Site Click Next.
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.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
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.
Creating your Webpage with tables. This is a 2 column by 1 row table!
Web Technologies Website Development Trade & Industrial Education
Create Your Own Webpage. Fun with images Today we’ll cover –Working with images Including an image on your page Making the image a link Editing images.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
Using FrontPage Express. Slide 1 Standard toolbars and menus Time indicator: gives an approximation of download time of the page.
Adding User Interactivity – Lesson 51 Adding User Interactivity Lesson 5.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Website Development with Dreamweaver
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup 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.
JAOIT 8.  Dreamweaver is a program for creating web pages and managing websites without having to type HTML code.  WYSIWYG – What you see is what you.
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.
IS1811 Multimedia Development for Internet Applications Lecture 4: Introduction to HTML Rob Gleasure
1 Creating Web Pages Part 1. 2 OVERVIEW: HTML-What is it? HyperText Markup Language, the authoring language used to create documents on the World Wide.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
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.
CMA Workshop Image Links and Text Links on the Same Line in a Component.
Wikispaces in Education Tutorial Fatema Kashoob Nawal ALKathiri
15.1 Fundamentals of HTML DeKalb County School System.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
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.
Dreamweaver MX. 2 Tools for Code Editing (p. 366) n An HTML editor like Dreamweaver writes most of the code you need, but at times you will need to perform.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Web Authoring with Dreamweaver. Unit Objectives  Be able to define keywords: HTML, HTTP (protocol), browser, web server, client/server, tag, attribute,
Introducing Dreamweaver. Dreamweaver The web development application used to create web pages Part of the Adobe creative suite.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
Creating and Editing a Web Page
1 Preparation for site Create a folder in MyDocuments: beavercheese. Create a subfolder, images Classes, career, DW beginner Download.
+ HTML Hypertext Markup Language. + Introducing HTML HTML is the language used in writing websites Open the “HTML Practice” link on the Daily Log Delete.
Creating and Editing a Web Page Using Inline Styles
1 of 6 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.
1 Your Web Page title body of Web page main heading H2 heading bulleted list paragraph.
Creating Web Pages with Links, Images, and Embedded Style Sheets
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
Introduction to HTML.
With Microsoft FrontPage 2000
Intro to Dreamweaver Web Design Section 8-1
Learning the Basics – Lesson 1
HTML HYPERTEXT MARKUP LANGUAGE.
Creating your first website
Using FrontPage Express
HTML & CSS 7 Languages in 7 Days.
Creating your first website
15.1 Fundamentals of HTML 2 assignments: 1—complete the worksheet
Hypertext Markup Language
Presentation transcript:

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

Introduction Is available to all Windows OS users (in our case, it is available to UMBC students). Is used to edit a wide range of file types including.txt,.xml,.html, etc. Is a very basic text editor which does not have a wide range of features.

Tutorial Information The following tutorial will explain how to create a very basic web page using Notepad. To create this webpage you will need an image file (we suggest downloading the w3schools image from ml_basic_img). ml_basic_img

Opening Notepad From the Windows Start Menu click: Start > Programs > Accessories > Notepad

Condensed HTML Introduction In order to create webpages in Notedpad, there are a few HTML tags which are required. The following is a short description of each of these tags: – Begins your HTML document. – Contains information such as the title of the web page, style specifications, and possibly JavaScript code for special effects on the webpage. – Specifies the title of your webpage. – Closes the title tag (every open tag must have a close) – Closes the head tag – Contains the primary content of your webpage. – Closes the body tag. – Closes the html tag and indicates the end of your webpage.

Adding Code to Notepad Since this is not an HTML tutorial, we will provide code for you to enter into Notepad. You may either copy the code from this tutorial or manually type it. We highly suggest copying so there are no errors in your code. To copy code, highlight it and right click. Select the copy option from the drop down list. To paste code into Notepad, click the Edit Menu and select Paste.

Example Code to Copy Title Goes Here Heading Goes Here Paragraph goes here.

Result After Pasting Code

Adding Content to your Code For this example, we will explain how to add an image to your web page. The file that we will be using is named “w3schools.jpg”, but you may select any image that you wish to place on your webpage. Click after the and press the enter key (you should see a new blank line). Type the following: Note: If you select to use a different image, replace w3schools.jpg with the name of your picture file. You will be able to find the width and height in the image properties.

Result After Inserting Image Code

Saving Your Code Go to File->Save As and name your file something meaningful (For Example: main.html) Make sure you include.html after the file name when you save it. (mypage.html)

Running Your Code After you’ve saved everything correctly, it’s time to see your masterpiece. Navigate to where you saved your file and double click on the file icon. It should appear your work in a web browsers window.

Conclusion Notepad has very basic features that can be used to edit and modify many different file types. Notepad can be used to create full HTML pages in a few easy steps. Notepad is a versatile tool which all Windows users have access to.

Works Cited "HTML Tutorial - Free HTML Code Tutorial - Simplest Ever." Clickfire - Web Reviews and How To's for Website Owners, Bloggers and Social Media Users. Web. 03 Apr "Tryit Editor V1.4." W3Schools Online Web Tutorials. Web. 03 Apr