HTML Basics BCHB697.

Slides:



Advertisements
Similar presentations
HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
Advertisements

/k/k 1212 Cascading Style Sheets Part one Marko Boon
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
CSS Chained classes Julien BRAURE –
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
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.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.
CHAPTER 1 HTML & HTML5 I อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Chapter 1: Intro to HTML Section 1: HTML Structure Presentation Section 2: Layout of an HTML File Section 3: Working with Lists & Tables Section 4: HTML.
HTML Help book. HTML HTML is the programming language used to make web pages for the Internet. HTML stands for Hyper Text Markup Language. HTML is made.
Fall 2016 CSULA Saloni Chacha
Cascading Style Sheets
Introduction and HTML overview
IS1500: Introduction to Web Development
INTRO TO WEB DEVELOPMENT html
non-native -> native?!
HTML Basics (Part-3).
CHAPTER 2 MARKUP LANGUAGE
Web Basics: HTML/CSS/JavaScript What are they?
HTML Basics.
HTML basics
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Web Development Part 1.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
4.01 Cascading Style Sheets
Internet & Web Engineering Course Code:CS-228 Credit Hours (3+1) Lab 2 HTML TABLES Instructor: Muhammad Zeeshan Haider Ali Blog Address:
Semester - Review.
Muhammad Meer Hazaar (Software Engineer)
HyperText Markup Language
>> HTML: Tables.
Cao Yuewen SEEM4570 Tutorial 03: CSS Cao Yuewen
Web Developer & Design Foundations with XHTML
Introduction to Web programming
Introduction to Web programming
Chapter 5 Introduction to XHTML: Part 2
Intro to CSS CS 1150 Fall 2016.
Chapter 7 Tables.
COMPUTING FUNDAMENTALS
Intro to CSS CS 1150 Spring 2017.
Introduction to Web programming
TOPICS Chrome Dev Tools Process for Building a Static Website
Software Engineering for Internet Applications
Computers and Scientific Thinking David Reed, Creighton University
DynamicHTML Cascading Style Sheet Internet Technology.
Basic HTML and Embed Codes
The University of Tulsa
LING 408/508: Computational Techniques for Linguists
LING 408/508: Computational Techniques for Linguists
HTML HTML is a language for describing web pages.
DynamicHTML Cascading Style Sheet Internet Technology.
Pertemuan 1b
Chapter 2 HTML & CSS.
CS3220 Web and Internet Programming CSS Basics
Introduction to HTML.
CS3220 Web and Internet Programming CSS Basics
Computer communications
Pertemuan 1 Desain web Pertemuan 1
Johan Ng and Muhammad Hazzry
4.01 Cascading Style Sheets
Creating your website and learning HTML
Web Programming and Design
Kanida Sinmai CSS – Cascading Style Sheets Kanida Sinmai
Presentation transcript:

HTML Basics BCHB697

Outline Hypertext Markup Language (HTML) Headings, Paragraphs Images, Anchors Tables CSS Forms, Events BCHB697 - Edwards

HTML XML-style document that describes how the web-browser should present the page Focus is on human as the consumer Display, layout oriented Originally static (or generated on the server) Now, often generated in the browser (javascript) BCHB697 - Edwards

HTML Shell head: body: Information about the document (Visible) Content of the document <!DOCTYPE html> <html> <head> </head> <body> </body> </html> BCHB697 - Edwards

HTML Headings & Paragraph h1, …, h6: Different levels of headings p: Paragraph (mostly optional) br Line break Try Me! <h1>This is heading 1</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nec velit dapibus scelerisque. <h2>This is heading 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nec velit scelerisque.</p> <h3>This is heading 3</h3> <br/> BCHB697 - Edwards

HTML Images & Anchors img: Image a: Anchor Try Me p: Paragraph src: URL of image file alt: alternative text height: image height width: image width a: Anchor href: URL to jump to Absolute or relative p: Paragraph align: Text alignment <img src="image.png"/> <a href="http://...">Text</a> <p align="center"> <a href="http://..."> <img src="image.png" alt="The Image" height="100" width="300"/> </a> </p> BCHB697 - Edwards

HTML Tables table: Table tr: Table Row th: Table Heading width: table width tr: Table Row valign: vertical alignment th: Table Heading align: horizontal alignment width: cell wdith td: Table Data/Cell Try Me <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td>Eve</td> <td>Jackson</td> <td>94</td> </table> BCHB697 - Edwards

HTML Tables (Vertical) table: Table width: table width tr: Table Row valign: vertical alignment th: Table Heading align: horizontal alignment width: cell wdith td: Table Data/Cell <table> <tr> <th>Firstname</th> <td>Jill</td> </tr> <th>Lastname</th> <td>Smith</td> <th>Age</th> <td>50</td> </table> BCHB697 - Edwards

HTML Styles Styles define how the HTML should be presented style="" parameter in HTML element All "traditional" HTML element display/layout attributes are available as styles (plus more) width, height, align, valign, … e.g. <table style="width:100%;">…</table> Try Me, Try Me BCHB697 - Edwards

Cascading Style Sheets (CSS) Specify styles for (all) HTML elements in a consistent and reliable manner Separate presentation from content Ensure similar look-and-feel across entire website Enable site-wide visual/theme changes by updating one file Respects HTML containment structure Can apply styles to individual elements or selectively to some elements BCHB697 - Edwards

In-Page CSS style: in-page or linked CSS <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> style: in-page or linked CSS HTML element tag & key-value pairs Try Me BCHB697 - Edwards

Linked CSS style: in-page or linked CSS Absolute or relative URL HTML element tag & key-value pairs <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> BCHB697 - Edwards

Linked CSS styles.css body { background-color: powderblue; } h1 { color: blue; p { color: red; styles.css BCHB697 - Edwards

HTML class, id attributes HTML elements can be identified as members of a class or by id. Try Me! <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 id="main">This is a heading</h1> <p class="error">This is a paragraph.</p> <h1>This is a heading</h1> <p class="info">This is a paragraph.</p> <div>This is another paragraph.</div> </body> </html> BCHB697 - Edwards

Linked CSS styles.css body { background-color: powderblue; } h1 { color: blue; #main { color: green; p.error { color: red; p.info { color: purple; styles.css BCHB697 - Edwards

HTML Forms (Traditional) form: Group of input elements w/ a submit input element, action attribute is URL to receive values from the input elements input: Obtain user input – lots of types <form action="/action"> First name: <input type="text" name="firstname"/> <br/> Last name: <input type="text" name="lastname"/> <input type="submit" value="Submit"/> </form> BCHB697 - Edwards

HTML Forms (Traditional) Require web-server to handle action Input element name attributes provide key-value pairs, method attribute indicates GET or POST Use table element to layout form elements <form action="/action"> First name: <input type="text" name="firstname"/> <br/> Last name: <input type="text" name="lastname"/> <input type="submit" value="Submit"/> </form> BCHB697 - Edwards

HTML Input (Modern) Use Javascript to change the page. <!DOCTYPE html> <html> <body> <script> function clicked() { var elt = document.getElementById('demo'); elt.innerHTML = Date(); }; </script> <button type="button" onclick="clicked();"> Click me! </button> <div id="demo"/> </body> </html> BCHB697 - Edwards

HTML Input (Modern) Use Javascript to change the page. <!DOCTYPE html> <html> <body> <script> function changed(self) { var elt = document.getElementById('demo'); elt.innerHTML = "Input value:"+self.value; }; </script> <input type="text" onchange="changed(this);"/> <div id="demo"/> </body> </html> BCHB697 - Edwards

HTML Input (Modern) Use Javascript to change the page. <!DOCTYPE html> <html> <body> <script> function changed(self) { var elt = document.getElementById('demo'); elt.innerHTML = "Input value:"+self.value; }; </script> <input type="text" onkeypress="changed(this);"/> <div id="demo"/> </body> </html> BCHB697 - Edwards

Extended Table Example Try Me <!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; tr:nth-child(even) { background-color: #dddddd; </style> <script> function clicked() { var company = document.getElementById("company").value; var contact = document.getElementById("contact").value; var country = document.getElementById("country").value; var newrow = document.createElement("tr"); newrow.innerHTML = "<td>"+company+"</td><td>"+contact+"</td><td>"+country+"</td>" var tbody = document.getElementById("table").children[0]; var inputrow = document.getElementById("inputrow"); tbody.insertBefore(newrow,inputrow); }; </script> </head> <body> <h2>HTML Table</h2> <table id="table"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> <tr id="inputrow"> <td><input id="company" type="text" value="Company"/></td> <td><input id="contact" type="text" value="Contact"/></td> <td><input id="country" type="text" value="Country"/> <button onclick="clicked();" style="float: right">Add</button> </td> </table> </body> </html> BCHB697 - Edwards