Presented by the Monroe County Public Library. Me: Austin Stroud, Instructional Designer at the Monroe County Public Library Adjunct Faculty, Ivy Tech.

Slides:



Advertisements
Similar presentations
HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.
Advertisements

HTML Basics Customizing your site using the basics of HTML.
Introduction to Creating a Web Page using a Simple Text Editor (Notepad) 1  2004 Ecirp Studios
M2 – Explain the tools and techniques used in the creation of an interactive website. By Arturas Vitkovskij.
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.
Unit 3 Day 4 FOCS – Web Design. No Journal Entry.
HTML.
HTML Creating Web pages. HTML Hyper Text Markup Language Not programming, but a markup language using tags to format text in Web browsers.
How To Create A Web Page By: Mikeon Briddy & Darrius Jacobs April 10,2006 Mr. Barnett.
How Tags are used to form your Web Page
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
HTML Lesson 1 TBE 540 Farah Fisher. Prerequisites Before beginning this lesson, the student must be able to… Access web pages and navigate the web Access.
HTML Basics An Introduction to HTML. What is HTML? Stands for “Hyper Text Markup Language” Composed of “tags” which are surrounded by sideways triangles.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web. Web.
Designing Web Pages Getting to know HTML... What is HTML? Hyper Text Markup Language HTML is the major language of the Internet’s World Wide Web Web.
HTML. We’ll learn … What HTML is What tags are What a basic web page looks like What 3 HTML tags are required What HTML comments look like How to title.
Using HTML to Create a Basic Web Page… By Josh Gallagan.
HTML.
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.
Adding Content To Your Faculty Page 1.Login 2.Create your Faculty Page 3.
1 Essential HTML coding By Fadi Safieddine (Week 2)
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.
Html Basic Codes Week Two. Start Your Text Editor Windows use 'Notepad’ Macintosh use 'Simple Text'
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
Web Programming Basics of HTML. HTML stands for Hyper Text Mark-up Language A mark-up language is different than those that you have learned before in.
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 INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.
All you ever needed to know…and more!. H.T.M.L. HyperText Mark-up Language Web’s programming language All web browsers Set of instructions Written with.
Computer Information Technology – Section 3-4. HTML – The Language of the Internet Objectives: The Student will: 1. Look at HTML 2. Understand the basic.
HTML Codes Miss B.
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.
HTML: Hyptertext Markup Language Doman’s Sections.
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.
McLean HIGHER COMPUTER NETWORKING Lesson 5 HTML Description of HTML web page Creating a simple HTML web page.
CPSC 203 Introduction to Computers Lab 66 By Jie Gao.
Web Design. How do web pages work? Webpages are written in a code called HTML. Programs like Internet Explorer read the code, and then show it as a web.
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. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.
Web programming Part 1: HTML 由 NordriDesign 提供
Basic HTML. So, what exactly is HTML? HTML stands for: HTML stands for: Hypertext Markup Language. It is a purpose built markup language for the delivery.
Building a Web Page. Create A New Folder  Right click on the desktop and select New / Folder  Name the folder playpen.
Getting Started with HTML. HTML  Hyper Text Markup Language  HTML isn’t a program language, its known as a markup language  A Markup language has tags.
+ Publishing Your First Post USING WORDPRESS. + A CMS (content management system) is an application that allows you to publish, edit, modify, organize,
HTML Introduction 2-1. Lecture 6 HTML - HyperText Markup Language  not a programming language  structure text into title, body, paragraphs, lists, links,
+ HTML Hypertext Markup Language. + Introducing HTML HTML is the language used in writing websites Open the “HTML Practice” link on the Daily Log Delete.
1 2/16/05CS120 The Information Era Chapter 4 Basic Web Page Construction TOPICS: Intro to HTML and Basic Web Page Design.
Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.
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 HTML stands for Hyper Text Markup Language. HTML is used in making the base of a Website You can just use an online website maker like weebly.com.
Wikis in Education: Part III Wiki Basics University School of Milwaukee.
HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place Programming language.
Revised June 2008 Online PD Basic HTML1 Let’s Try It!  Open Notepad oStart > All Programs > Accessories > Notepad oDon’t get WordPad by mistake – won’t.
Computer Basics Introduction CIS 109 Columbia College.
Martin Norris Computing Teacher/Leader at Moldgreen Community Primary School, Huddersfield
Online PD Basic HTML The Magic Of Web Pages
Internet Exploration: HTML Basics
HTML GUIDE Press F5 and then
Uppingham Community College
Internet Exploration: HTML Basics
HTML.
HTML HYPERTEXT MARKUP LANGUAGE.
WEB DESIGNING THROUGH HTML
Creating your first website
Creating your first website
Hypertext Markup Language
Presentation transcript:

Presented by the Monroe County Public Library

Me: Austin Stroud, Instructional Designer at the Monroe County Public Library Adjunct Faculty, Ivy Tech Community College Started building websites/learning the code behind it at 13 You: Do you have any experience working on a website? Have you ever tried to use a free, online builder? What are you hoping to learn in this course?

You can create your own website by typing out the code (known as HTML) on your own. A popular program that comes on every Windows computer is Notepad, this is all you need to get started. If you prefer to be stepped through this process, there are a number of free website builders available on the Internet that we will discuss later.

HTML stands for Hypertext Mark-up Language. HTML is the code “behind” a website. There are more advanced forms of coding that go into websites, but HTML sets a good foundation for you to learn the rest. We will just be covering HTML basics today.

1.Left click on Windows logo in bottom left corner of your screen 2.Left click on “All Programs” 3.Scroll down to the “Accessories” folder and left click 4.Left click on “Notepad”

With HTML, almost everything in the code needs to have a beginning and an end. This is done with HTML tags. In Notepad, type at the beginning of your document and below this tag. This defines the document as a website coded in HTML. Everything else you type will be between these two HTML tags. After the tag you also will need a section that contains information about the website, such as the title.

So far, your Notepad document should look similar to this:

Next, let’s add a title inside the header section as you see below: Austin’s Website

Now, we need a section that starts just after the tag. This is where the content of your website will go. Austin’s Website Your website’s content goes here!

word = bold text word = italic text word = underlined text = page break (drops your next text down a line) words = paragraph = horizontal line that can separate sections of your website Try some of these tags out in the body area of your code. More tag examples are provided on some of your handouts.

Austin’s Website Your website’s content goes here! My name is Austin Stroud. I work at the Monroe County Public Library.

When you are finished, in Notepad, follow these instructions to save your file: 1.Left click on “File” 2.Left click on “Save As…” 3.Change the “Save as type” from “Text documents” to “All files” 4.Name your file something that ends in.html or.htm 5.For example, I am going to name mine testwebsite.html and then click “Save” 6.You now can open your document to see what it looks like.

My code turned out like this:

– GoDaddy is what I use Articles with further ideas and reviews:

Now, if you prefer to not mess with the HTML coding yourself – there are a number of free options out there for you (below are just a few examples): 1.Wordpress – blog/website combo 2.Weebly – blog/website combo 3.Wix – websites built from editing templates 4.Google Sites – wiki/website combo