Mark Dixon Page 1 Soft131 02 – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile.

Slides:

Advertisements

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

Advertisements

Drupal Basics Part 2 Everyday Tasks Editing a page Toolbar basics Add a hyperlink Using the theme Agricultural Communications Services Integrated Media.

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.

HTML: HyperText Markup Language Hello World Welcome to the world!

HTML Minute University Richard Fisher 10/1/2001 HTML FSA Training2 HTML Overview  HTML  HyperText Markup Language.

Mark Dixon Page 1 SOFT – Module Introduction.

Mark Dixon, SoCCE SOFT 131Page 1 SOFT – Module Introduction.

Mark Dixon, SoCCE SOFT 131Page 1 20 – Web applications: HTML and Client-side code.

Mark Dixon, SoCCE SOFT 131Page 1 16 – Web applications: HTML and Client-side code.

CIS101 Introduction to Computing

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

CM143 - Web Week 2 Basic HTML. Links and Image Tags.

 2004 Prentice Hall, Inc. All rights reserved. Introduction to XHTML: Part 1.

Mark Dixon, SoCCE SOFT 131Page 1 SOFT – Module Introduction.

HTML Introduction HTML

Mark Dixon Page 1 SOFT131 / Tech – Module Introduction.

Mark Dixon, SoCCE SOFT 131Page 1 08 – Web applications: HTML and ActiveX controls.

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.

Mark Dixon Page 1 Tech – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile.

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.

Today’s Topic Language of web page - HTML (Hypertext Markup Language)

M Dixon 1 Web-Application Development Workshop. M Dixon 2 Session Aims & Objectives Aims –to introduce the main concepts involved in creating web-applications.

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.

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.

M Dixon 1 Soft – Module Introduction and HTML.

ACM 511 HTML Week -1 ACM 511 Course Notes. Books ACM 511 Course Notes.

1 Essential HTML coding By Fadi Safieddine (Week 2)

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

1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.

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'

HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using 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.

What is Markup and Markup Languages? What is HTML? A Basic HTML Document Basic HTML Tags Tag Attributes and Text Formatting Tags Insert Hyperlinks Add.

HTML INTRODUCTION. What is HTML?  HTML stands for Hypertext Markup Language  Developed in 1990  Hidden code that helps us communicate with others on.

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

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. Hypertext Markup Language Lesson Objectives 1. We will be able to understand the need for HTML and where it is used 2. We will be edit HTML to.

CA Professional Web Site Development Class 2: Anatomy of a Web Site and Web Page & Intro to HTML.

Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.

Mark Dixon Page 1 Soft – Module Introduction and HTML.

Mark Dixon Page 1 Web-Application Development Workshop.

M Dixon 1 Web-Application Development Workshop. M Dixon 2 Session Aims & Objectives Aims –to introduce the main concepts involved in creating web-applications.

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.

Teacher Web Page Creation Eileen Musselman. Log on to Muhlenberg’s Intranet Click Submit button.

M Dixon 1 Tech HTML. M Dixon 2 Admin Attendance Register: –log in to your profile.

Mark Dixon Page 1 Tech – HTML. Mark Dixon Page 2 Admin Attendance Register: –log in to your profile.

HTML. Hyper Text Markup Language Markup your text document The markup is the tag Hyper text means you can jump from place to place.

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.

Spiderman ©Marvel Comics Creating Web Pages (part 1)

Creating and Editing a Web Page

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.

Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring

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.

HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.

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

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.

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.

Week-11 (Lecture-1) Introduction to HTML programming: A web based markup language for web. Ex.

Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.

Internet Exploration: HTML Basics

Internet Exploration: HTML Basics

Intro to Web Development Links

SOFT – Module Introduction

Computer communications

HyperText Markup Language

WJEC GCSE Computer Science

Presentation transcript:

Mark Dixon Page 1 Soft – HTML

Mark Dixon Page 2 Admin Attendance Register: –log in to your profile

Mark Dixon Page 3 Session Aims & Objectives Aims –introduce you to the fundamental aspects of web pages (HTML) Objectives, after this week’s sessions, you should be able to: –identify how many tags are in a block of html –identify how many elements are in a block of html –identify nested html elements –generate html for basic tasks, e.g. bold, italic, centred text images

Mark Dixon Page 4 HTML: Elements & Tags Hyper-Text Markup Language text files – edited with notepad tags, e.g. element = start tag + content + end tag –bold: This will be in bold –italic: This will be in italic work like brackets –start/open –end/close

Mark Dixon Page 5 Questions: Tags How many tags are in the following: Hello Soft

Mark Dixon Page 6 Questions: Elements How many elements are in the following: Hello Soft

Mark Dixon Page 7 HTML: Nesting Elements Nesting – puts one element inside another: Hello Cannot overlap elements: Hello 

Mark Dixon Page 8 Questions: HTML Elements Which of the following are valid elements? Title Good morning. Soft 131  

Mark Dixon Page 9 HTML: page structure Test This is a test page. head (info) body (content) every HTML page has 2 sections:

Mark Dixon Page 10 Test This is a test page. spaces are used to move lines in from left helps see structure Indentation Test This is a test page. head (is inside html) title (is inside head)

Mark Dixon Page 11 HTML: Attributes Some tags need extra information to work: –Anchor (hyper-link) element: Next Page –Image element: –Embedded object element: attribute (page to jump to) attribute (filename of picture to display) attribute (filename of music to play)

Mark Dixon Page 12 Attributes go inside the start tag: Next Page not anywhere else href=“nextpage.htm”Next Page HTML: Attributes (where) attribute start tag 

Mark Dixon Page 13 Questions: HTML attributes Consider the following HTML: Next Page a)Give an example of an attribute b)Is the following an attribute? c)How many attributes are there in: href="next.htm" No (tag) 2

Mark Dixon Page 14 HTML Tags: Reference Lots of info available on-line, e.g.: Short list of tags: – : new paragraph – : bold text – : italic text – : anchor (link) to another web page – : image/picture (.bmp,.jpg,.gif) – : embedded object (.avi.mpg.wav.mp3)

Mark Dixon Page 15 Example: My Summer My summer web-page

Mark Dixon Page 16 Start WAMPServer Click Start WAMPServer icon

Mark Dixon Page 17 NetBeans: New Project Click File Menu Click New Project

Mark Dixon Page 18 NetBeans: New Project Select PHP Application Click Next button

Mark Dixon Page 19 NetBeans: New Project Change Project Name Change Folder (Click Browse Button)

Mark Dixon Page 20 NetBeans: New Project Change URL to localhost:8080 Copy Files to C:\wamp\www…

Mark Dixon Page 21 NetBeans: New Project

Mark Dixon Page 22 NetBeans: Delete index.php right click index.php, click delete item

Mark Dixon Page 23 NetBeans: Add html file right click Source Files, click HTML file item

Mark Dixon Page 24 Tutorial Exercise 1: My Summer LEARNING OBJECTIVE: to understand tags, elements, and attributes, so that you can create your own web-pages using NetBeans TASK: Create a ‘My Summer’ web page, which describes the highlights of what you did over the summer, including text, pictures, and sound. Hint: Create a new web site within NetBeans. Create a new web page within you web site.