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

Slides:

Advertisements

Similar presentations

Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.

Advertisements

Introduction to HTML

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.

HTML Basics Customizing your site using the basics of HTML.

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

WeB application development

Creating and Editing a Web Page Using Inline Styles

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 Page 1 02 – Dynamic HTML (client-side scripting)

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

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

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

Mark Dixon Page 1 SOFT131 / Tech – Module Introduction.

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

Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.

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.

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.

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

Mark Dixon, SoCCE SOFT 131Page 1 02 – Dynamic HTML (client-side scripting)

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.

Mark Dixon Page 1 03 – Dynamic HTML (client-side scripting)

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

Mark Dixon Page 1 03 – Dynamic HTML (client-side scripting)

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.

Creating Your First Web Page – Topic: Creating a wiki, blog, image blog and podcast Click Arrow - Next Slide 1.

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

Mark Dixon Page 1 Soft – HTML. Mark Dixon Page 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.

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.

HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text.

M Dixon 1 02 – Dynamic HTML (client-side scripting)

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.

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.

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.

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

NOTEPAD++ Lab 1 1 Riham ALSmari. Why Notepad++ ?  Syntax highlighting  Tabbed document interface  Zooming  Indentation code  Find and replace over.

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

Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines

SOFT – Module Introduction

Computer communications

HyperText Markup Language

Presentation transcript:

Mark Dixon Page 1 Tech – 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 Take nobody’s word for it Royal Society –Oldest scientific academy in continuous existence –Motto: Nullius in verba = Take nobody’s word for it –Official foundation: 28 November 1660 – –Belief vs. Knowledge

Mark Dixon Page 5 HTML: Why? Hello Hello there.

Mark Dixon Page 6 HTML: Why? Hello Hello there. <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns=" Hello there Mark Dixon T20:29:00Z T20:30:00Z MicrosoftInternetExplorer4  /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman";} Hello there. previous page (created using Visual Studio) 6 lines 461 bytes previous page (created using MS Word) 114 lines 3152 bytes

Mark Dixon Page 7 HTML: Tags Hyper-Text Markup Language text files – edited with notepad tags, e.g.

Mark Dixon Page 8 HTML: Elements 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 9 Questions: Tags How many tags are in the following: Hello Soft

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

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

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

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

Mark Dixon Page 14 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 15 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 16 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 17 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 18 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 19 Example: My Summer My summer web-page

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

Mark Dixon Page 21 How to: Environment Settings If you install Visual Studio on your laptop: –Choose VB settings (same as my laptop):

Mark Dixon Page 22 How to: Create Web Site 1. Click File menu 2. Click New Web Site menu item 3. Click Visual Basic item 4. Click ASP.NET Empty Web Site item 5. Click File System item 6. Click Browse button

Mark Dixon Page 23 How to: Create Web Site 7. Navigate to your USB stick 8. Type name in folder box (e.g. \MySummer) 9. Click Open button 10. Click Yes button 11. Click OK button

Mark Dixon Page 24 How to: Create Web page 12. Click Add New Item button (or right click project name) 13. Click HTML Page item 14. Change page name (e.g. MySummer.htm) 15. Click Add button

Mark Dixon Page 25 How to: Edit code 16. Click Source button

Mark Dixon Page 26 How to: View page (Run) 17. Click Play button 18. Click OK button (to enable debugging)