Scribd
Upload
44 views

Document Object Model!: Writing Clean Code!

The document discusses the Document Object Model (DOM) and its importance as the basis for HTML5. It explains that the DOM provides a common tree structure for all web pages, with the html element at the root. It then outlines the three main parts of a well-formed document: the doctype, head, and body. The doctype specifies the HTML version, the head contains metadata, and the body holds the visible content. An example template is provided and the document stresses validating code to ensure it conforms to the DOM structure.

Uploaded by

Riajimin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

Document Object Model!: Writing Clean Code!

The document discusses the Document Object Model (DOM) and its importance as the basis for HTML5. It explains that the DOM provides a common tree structure for all web pages, with the html element at the root. It then outlines the three main parts of a well-formed document: the doctype, head, and body. The doctype specifies the HTML version, the head contains metadata, and the body holds the visible content. An example template is provided and the document stresses validating code to ensure it conforms to the DOM structure.

Uploaded by

Riajimin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

INTRODUCTION

02.01 The Document Object Model (DOM) TO HTML

Document Object Model!

Writing clean code!


INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

The Document Object Model (DOM)!


Basis of HTML5 is New features should be based on
HTML, CSS, the DOM, and JavaScript!

DOM provides common tree-like structure that all pages


should follow!

Computer Scientists love trees (the mathematical kind)


because you can test them.!
INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

HTML is built on the DOM!


Document!

Root element!
<html>!

Element! Element!
<head>! z! <body>!

Element! Attribute! Element! Element!


<title>! href! <a>! <h1>!

Text! Text! Text!


my title! my link! my header!

Adapted from w3Schools.com


INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

Three parts of a well-formed document!


Doctype!
Version of HTML that you will be using!
!
Head!
Metadata!
!
Body!
Displayable content!
INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

Doctype!
HTML5 !
<!DOCTYPE html>!
Previous versions dictated backwards
compatibility!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> !
!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> !
INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

Head!
Additional information used by the browser !
Meta data language, title!
Supporting files JavaScript, Styling, Add-
ons !
!
Other than title, meta-data is not displayed!
INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

Body!
Bulk of your page!
!
Important to write well-formatted (tree-like)
code.!
!
Most of the content is displayed by the browser,
but there may be some meta-data too!
INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

!
Example!
Example: template.html!
INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML
INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

Validate the Code!


INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

Success!!!
INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

Review!
Well-formed pages use the DOM structure!
Use beginning and end tags!
Close inner tags before outer ones!
Use valid attributes!

Browsers will fix bad code, but not always


well. Use a validator to check your code!
INTRODUCTION
02.01 The Document Object Model (DOM) TO HTML

Acknowledgements/Contributions!
These slides are Copyright 2015- Colleen van Lent as part of http://
www.intro-webdesign.com/ and made available under a Creative
Commons Attribution 4.0 License. Please maintain this last slide in all
copies of the document to comply with the attribution requirements of
the license. If you make a change, feel free to add your name and
organization to the list of contributors on this page as you republish the
materials.!
!
Initial Development: Colleen van Lent , University of Michigan School of
Information!
!

You might also like