Powerpoint Templates Page 1 Powerpoint Templates Let’s Build a Website by Sybil Prince Nelson.

Slides:



Advertisements
Similar presentations
HTML Basics Customizing your site using the basics of HTML.
Advertisements

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.
Hyper Text Markup Language.  HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language,
MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
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.
CIS101 Introduction to Computing Week 05. Agenda Your questions CIS101 Survey Introduction to the Internet & HTML Online HTML Resources Using the HTML.
CIS101 Introduction to Computing
Introduction to HTML 2006 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2006 INT197B. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Introduction to HTML 2004 CIS101. What is the Internet? Global network of computers that are connected and communicate via a series of Protocols Protocols.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
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.
Overview of HTML. Three Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
Slide 1 Today you will: think about criteria for judging a website understand that an effective website will match the needs and interests of users use.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
Web Technologies Website Development Trade & Industrial Education
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.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
HTML Structure & syntax
The Internet and the World Wide Web. The Internet A Network is a collection of computers and devices that are connected together. The Internet is a worldwide.
1 Essential HTML coding By Fadi Safieddine (Week 2)
Understanding HTML Code
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
McGraw-Hill/Irwin Copyright © 2013 by The McGraw-Hill Companies, Inc. All rights reserved. Extended Learning Module F Building a Web Page with HTML.
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.
OBJECTIVES  What is HTML  What tools are needed  Creating a Web drive on campus (done only once)  HTML file layout  Some HTML tags  Creating and.
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
Basic HTML PowerPoint How Hyper Text Markup Language Works.
Basic HTML PowerPoint How Hyper Text Markup Language Works
Overview of HTML/XHTML Two Different Approaches  Text editor like Notepad  HTML editor such as: –KompoZer –DreamWeaver –Microsoft Expression Web –iWeb.
IS1811 Multimedia Development for Internet Applications Lecture 4: Introduction to HTML Rob Gleasure
Web Design 3080 – Week 2 More Fun With Delicious.com Setting up a ‘network’. 1.Go to Delicious.com and sign up for a personal account 2.Once your account.
Introduction to web development and HTML MGMT 230 LAB.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
1 Chinese Information Processing : Using Computers to Teach and Learn Chinese Week 6 and 7: Creating and maintaining web pages - html and ftp.
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.
INP 150: Basic HTML Term: Winter 2002 Section: H1 Time: Mon/Wed 5:30- 7:25 pm Place: TI237 Instructor: Paul J. Millis.
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.
HTML BTEC National in Computing Section5. Create Information “HTML: defining HTML, discussing HTML uses and demonstrating HTML basics, HTML structure…..
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.
Web Site Design & Management Class One Agenda Attendance Questionnaire Introductions Class Policies About the class Code your first page FTP Assignments.
HTML Basic. 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.
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.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Spiderman ©Marvel Comics Creating Web Pages (part 1)
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
1 2/16/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Intro to HTML and Basic Web Page Design.
HTML HyperText Markup Language Victoria E. Kozlek.
Web Design – Week 2 Introduction to website basics Website basics: How the Web Works Client / server architecture Packet switching URL components.
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.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
Computer Basics Introduction CIS 109 Columbia College.
Objectives At the end of this session students will: Define the following terms in two sentences or less Website Web page Browser Html URL Hyperlink Explain.
HTML Structure & syntax
Online PD Basic HTML The Magic Of Web Pages
HTML Basics.
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
Internet Technologies I - Lect.01 - Waleed Ibrahim Osman
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
HTML Structure & syntax
Presentation transcript:

Powerpoint Templates Page 1 Powerpoint Templates Let’s Build a Website by Sybil Prince Nelson

Powerpoint Templates Page 2 Basics What is HTML? HTML is the language used to create web pages. It tells your browser (like Internet Explorer or Firefox) what to display on a web page. What does HTML stand for? HTML stands for HyperText Markup Language. HypertextText with links to other pages. Can contain images and other things. Basically, a web page.Markup LanguageThe set of instructions that describe how text should be displayed. For HTML, these instructions are called tags.HTML = HyperText Markup Language = The tags that tell your browser what to display on a web page. How Does HTML Work? In an HTML tutorial for beginners it's all about the tags. Browsers, like Internet Explorer or Firefox, are used to display web pages. Tags tell your browser what to display on a web page. This is the HTML tag: It's the main tag. It says, "Everthing after this is a web page." There are beginning and ending tags. They come in pairs: Your browser understands this. Your browser doesn't display tags. It displays only what is between the tags.

Powerpoint Templates Page 3 A Basic Webpage 1.dtd This is a heading This is the paragraph text. This is more paragraph text. This is more paragraph text.

Powerpoint Templates Page 4 Let’s get a little fancier HTML Elements Most HTML elements have these four parts: A starting tag Example: An ending tag Example: The content between the starting and ending tags Example: "Once upon a time a girl with… etc." Attributes (more about attributes in the next section) Example: style="background-color:yellow" Here's an example of an HTML element: Once upon a time a girl with beautiful long golden hair… etc. By the way… there are a few elements that only have one tag. For example: The element causes the browser to skip to the next line. It's the "line break" tag. There are no contents or ending tag for these types of elements.

Powerpoint Templates Page 5 Still getting fancy HTML Attributes A HTML element can have attributes. An attribute gives more information about the contents of an element to the browser. Think of an attribute as quality or characteristic of the element. The attribute of an element is located in the starting tag. blah blah blah. This particular style attribute tells the browser to make the background color of that paragraph yellow. If you know your HTML basics it will be much easier for you to learn what you need to know in order to build your website. If you are going to be creating websites for a while (there's a good chance you will be) tags, elements and attributes are things you want to be clear on.

Powerpoint Templates Page 6 Let’s try it A friendly tool.

Powerpoint Templates Page 7 Ways to Build a Website There are several ways to build a website: Point and click software (fast, not flexible). Manually writing the HTML (important to learn, requires time). – notepad, word, powerpoint Using an HTML Editor (efficient once learned, HTML knowledge helps). Using a template (easy, efficient, must use HTML)

Powerpoint Templates Page 8 Some helpful html language HTML Code: Example Images: HTML Code: Important: Where is this picture? Src stands for source. There are two ways to define the source of an image. First you may use a standard URL. (src= As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods. (src="../picturename.gif") The location of this picture file is in relation to your location of your.html file. For more info on images:

Powerpoint Templates Page 9 Your MUSC space Step 1 My computer < Map Network Drive Step 2 Enter \\homeroom.musc.edu\netID\\homeroom.musc.edu\netID Step 3 For user name enter clinlan\netID

Powerpoint Templates Page 10 Let’s Try it! Step 1 Create a folder called public_html in your MUSC space Step 2 Create an html file called index within your public folder Step 3 Your main page is this index file. Start writing on your index file. Create links to other pages on your site. Step 4 You can also download a template from

Powerpoint Templates Page 11 How to design your site Think about the function of your site Go for simplicity as opposed to clutter Avoid text fonts smaller than 11px Keep a consistent layout Every few edits, check your progress

Powerpoint Templates Page 12 Assignment Create a website that includes the following: Name Picture A short bio Personal/contact info Current classes Research interests CV me a link to your website