Start Programming Using HTML CSS and JavaScript

1st Edition Iztok Fajfar (Author) pdf download

https://ebookname.com/product/start-programming-using-html-css-
and-javascript-1st-edition-iztok-fajfar-author/

Get the full ebook with Bonus Features for a Better Reading Experience on ebookname.com
Instant digital products (PDF, ePub, MOBI) available
Download now and explore formats that suit you...

Security for Web Developers Using JavaScript HTML and

CSS Early Release Raw Unedited John Paul Mueller

https://ebookname.com/product/security-for-web-developers-using-
javascript-html-and-css-early-release-raw-unedited-john-paul-
mueller/

HTML CSS and JavaScript Mobile Development For Dummies

1st Edition William Harrel

https://ebookname.com/product/html-css-and-javascript-mobile-
development-for-dummies-1st-edition-william-harrel/

Building Android Apps with HTML CSS and JavaScript 2nd

Edition Jonathan Stark

https://ebookname.com/product/building-android-apps-with-html-
css-and-javascript-2nd-edition-jonathan-stark/

Melancholy Medicine and Religion in Early Modern

England Reading The Anatomy of Melancholy 1st Edition
Mary Ann Lund

https://ebookname.com/product/melancholy-medicine-and-religion-
in-early-modern-england-reading-the-anatomy-of-melancholy-1st-
edition-mary-ann-lund/
Scientists Experts and Civic Engagement Walking a Fine
Line Amy E. Lesen

https://ebookname.com/product/scientists-experts-and-civic-
engagement-walking-a-fine-line-amy-e-lesen/

The Encyclopedia of Stress And Stress related Diseases

2nd Edition Facts on File Library of Health and Living
Ada P. Kahn

https://ebookname.com/product/the-encyclopedia-of-stress-and-
stress-related-diseases-2nd-edition-facts-on-file-library-of-
health-and-living-ada-p-kahn/

Nonlinear Partial Differential Equations for Scientists

and Engineers Second Edition Lokenath Debnath

https://ebookname.com/product/nonlinear-partial-differential-
equations-for-scientists-and-engineers-second-edition-lokenath-
debnath/

An Introduction to Language 1st Edition Kirk Hazen

https://ebookname.com/product/an-introduction-to-language-1st-
edition-kirk-hazen/

Message in a Mobile Mixed Messages Tales of Missing and

Mobile Communities at the University of Khartoum 1st
Edition Siri Lamoureaux

https://ebookname.com/product/message-in-a-mobile-mixed-messages-
tales-of-missing-and-mobile-communities-at-the-university-of-
khartoum-1st-edition-siri-lamoureaux/
Allostery Methods and Protocols 1st Edition James K.
Kranz

https://ebookname.com/product/allostery-methods-and-
protocols-1st-edition-james-k-kranz/
 START
PROGRAMMING
using HTML, CSS,
and JAVASCRIPT
 CHAPMAN & HALL/CRC
TEXTBOOKS IN COMPUTING

Series Editors

John Impagliazzo Andrew McGettrick

Professor Emeritus, Hofstra University Department of Computer
and Information Sciences
University of Strathclyde

Aims and Scope

This series covers traditional areas of computing, as well as related technical areas, such as
software engineering, artificial intelligence, computer engineering, information systems, and
information technology. The series will accommodate textbooks for undergraduate and gradu-
ate students, generally adhering to worldwide curriculum standards from professional societ-
ies. The editors wish to encourage new and imaginative ideas and proposals, and are keen to
help and encourage new authors. The editors welcome proposals that: provide groundbreaking
and imaginative perspectives on aspects of computing; present topics in a new and exciting
context; open up opportunities for emerging areas, such as multi-media, security, and mobile
systems; capture new developments and applications in emerging fields of computing; and
address topics that provide support for computing, such as mathematics, statistics, life and
physical sciences, and business.

Published Titles

Paul Anderson, Web 2.0 and Beyond: Principles and Technologies

Henrik Bærbak Christensen, Flexible, Reliable Software: Using Patterns and Agile Development
John S. Conery, Explorations in Computing: An Introduction to Computer Science
John S. Conery, Explorations in Computing: An Introduction to Computer Science and Python
Programming
Iztok Fajfar, Start Programming Using HTML, CSS, and JavaScript
Jessen Havill, Discovering Computer Science: Interdisciplinary Problems, Principles, and
Python Programming
Ted Herman, A Functional Start to Computing with Python
Pascal Hitzler, Markus Krötzsch, and Sebastian Rudolph, Foundations of Semantic Web
Technologies
Mark J. Johnson, A Concise Introduction to Data Structures using Java
Mark J. Johnson, A Concise Introduction to Programming in Python
Lisa C. Kaczmarczyk, Computers and Society: Computing for Good
Mark C. Lewis, Introduction to the Art of Programming Using Scala
Efrem G. Mallach, Information Systems: What Every Business Student Needs to Know
Bill Manaris and Andrew R. Brown, Making Music with Computers: Creative Programming in
Python
Uvais Qidwai and C.H. Chen, Digital Image Processing: An Algorithmic Approach with MATLAB®
David D. Riley and Kenny A. Hunt, Computational Thinking for the Modern Problem Solver
Henry M. Walker, The Tao of Computing, Second Edition
 Chapman & Hall/CRC
TEXTBOOKS IN COMPUTING

START
PROGRAMMING
using HTML, CSS,
and JAVASCRIPT

Iztok Fajfar
University of Ljubljana
Slovenia
CRC Press
Taylor & Francis Group
6000 Broken Sound Parkway NW, Suite 300
Boca Raton, FL 33487-2742
© 2016 by Taylor & Francis Group, LLC
CRC Press is an imprint of Taylor & Francis Group, an Informa business

No claim to original U.S. Government works

Version Date: 20150904

International Standard Book Number-13: 978-1-4987-3145-4 (eBook - PDF)

This book contains information obtained from authentic and highly regarded sources. Reasonable efforts have been
made to publish reliable data and information, but the author and publisher cannot assume responsibility for the valid-
ity of all materials or the consequences of their use. The authors and publishers have attempted to trace the copyright
holders of all material reproduced in this publication and apologize to copyright holders if permission to publish in this
form has not been obtained. If any copyright material has not been acknowledged please write and let us know so we may
rectify in any future reprint.

Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or uti-
lized in any form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopy-
ing, microfilming, and recording, or in any information storage or retrieval system, without written permission from the
publishers.

For permission to photocopy or use material electronically from this work, please access www.copyright.com (http://
www.copyright.com/) or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923,
978-750-8400. CCC is a not-for-profit organization that provides licenses and registration for a variety of users. For
organizations that have been granted a photocopy license by the CCC, a separate system of payment has been arranged.

Trademark Notice: Product or corporate names may be trademarks or registered trademarks, and are used only for
identification and explanation without intent to infringe.
Visit the Taylor & Francis Web site at
http://www.taylorandfrancis.com
and the CRC Press Web site at
http://www.crcpress.com
To my family
 Contents

Acknowledgments xi

Introduction xiii

About the Author xvii

1 Content and Structure 1

1.1 Opening . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Introducing HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 The Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Minimal HTML Document . . . . . . . . . . . . . . . . . . . . . . . 4
1.5 Formatting a Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.6 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

2 Building a Sound Structure 15

2.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.2 Lists and Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.3 Generic <div> and <span> Elements . . . . . . . . . . . . . . . . . 21
2.4 Sectioning Elements . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.5 Hyperlinks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.6 Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3 Presentation 35
3.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.2 Setting up a Web Server . . . . . . . . . . . . . . . . . . . . . . . . . 36
3.3 Introducing CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.4 CSS Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.5 CSS Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.6 CSS Pixel Unit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

4 More Control over Style 51

4.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 51

vii
 4.2 Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
4.3 ID Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
4.4 Grouping Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.5 Nesting Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.6 The HTML Ancestry Tree . . . . . . . . . . . . . . . . . . . . . . . 61
4.7 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
4.8 Determining Style Specificity . . . . . . . . . . . . . . . . . . . . . . 64
4.9 Relative Sizes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
4.10 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

5 Understanding CSS Boxes 71

5.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 71
5.2 CSS Box Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
5.3 Element Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
5.4 Positioning and Element Flow . . . . . . . . . . . . . . . . . . . . . 80
5.5 Containing Block . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
5.6 Hiding Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
5.7 Floated Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
5.8 Special Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
5.9 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

6 Behavior 101
6.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 101
6.2 Server Side Includes . . . . . . . . . . . . . . . . . . . . . . . . . . 104
6.3 Introducing JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 105
6.4 Values and Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
6.5 Operators and Expressions . . . . . . . . . . . . . . . . . . . . . . . 114
6.6 Concluding Remarks and Homework . . . . . . . . . . . . . . . . . . 124

7 Controlling Program Flow 127

7.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 127
7.2 Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
7.3 Design a Simple Program . . . . . . . . . . . . . . . . . . . . . . . . 136
7.4 Type Conversions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
7.5 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

8 Introducing Objects 147

8.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 147
8.2 switch Conditional . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
8.3 Math Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
8.4 do/while Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
8.5 Date Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
8.6 Concluding Thoughts and Homework . . . . . . . . . . . . . . . . . 164

9 Understanding Arrays and Strings 165

9.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 165
9.2 Array Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
9.3 for Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
9.4 Array Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178

viii Contents
 9.5 String Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
9.6 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

10 Understanding Functions 187

10.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 187
10.2 Writing Function Definitions . . . . . . . . . . . . . . . . . . . . . . 188
10.3 References to Function Objects . . . . . . . . . . . . . . . . . . . . . 195
10.4 Variable Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
10.5 Passing Function Arguments by Reference . . . . . . . . . . . . . . . 200
10.6 The Scope Chain and Closures . . . . . . . . . . . . . . . . . . . . . 201
10.7 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

11 Building Your Own Objects 205

11.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 205
11.2 JavaScript Objects Revisited . . . . . . . . . . . . . . . . . . . . . . 207
11.3 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
11.4 Constructor Overloading . . . . . . . . . . . . . . . . . . . . . . . . 211
11.5 Factory Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
11.6 The prototype Object . . . . . . . . . . . . . . . . . . . . . . . . . 214
11.7 More on Setting and Querying Object Properties . . . . . . . . . . . . 217
11.8 Sudoku Puzzle Helper . . . . . . . . . . . . . . . . . . . . . . . . . . 219
11.9 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

12 Using JavaScript to Control the Browser 227

12.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 227
12.2 Deeper into the Browser . . . . . . . . . . . . . . . . . . . . . . . . 229
12.3 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
12.4 Scripting Documents . . . . . . . . . . . . . . . . . . . . . . . . . . 233
12.5 Timer Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
12.6 Scripting Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
12.7 Introducing Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
12.8 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

13 User Interface 245

13.1 Homework Discussion . . . . . . . . . . . . . . . . . . . . . . . . . 245
13.2 Using Family Relations to Manipulate Elements . . . . . . . . . . . . 247
13.3 Completing Math Worksheet Generator . . . . . . . . . . . . . . . . 249
13.4 Completing Sudoku Puzzle Helper . . . . . . . . . . . . . . . . . . . 255
13.5 Homework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

A Solution to the Last Homework: Sudoku Generator 265

B Ways to Continue 271

B.1 Graphics with Canvas . . . . . . . . . . . . . . . . . . . . . . . . . . 271
B.2 Local Data Storage through Web Storage . . . . . . . . . . . . . . . . 279
B.3 Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
B.4 jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
B.5 Go Mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302

Contents ix
C HTML Mini Reference 305
C.1 Root Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
C.2 Document Metadata . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
C.3 Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
C.4 Sections and Structure . . . . . . . . . . . . . . . . . . . . . . . . . 311
C.5 Grouping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
C.6 Text-Level Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . 321
C.7 Embedded Content . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
C.8 Tabular Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
C.9 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
C.10 Global Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
C.11 Event-Handler Attributes . . . . . . . . . . . . . . . . . . . . . . . . 338

D CSS Mini Reference 339

D.1 CSS Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
D.2 inherit keyword . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
D.3 Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
D.4 List Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
D.5 Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351
D.6 Spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355
D.7 Background Properties . . . . . . . . . . . . . . . . . . . . . . . . . 357
D.8 Table Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358
D.9 Size Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360
D.10 Positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361
D.11 Pseudo-Classes and Pseudo-Elements . . . . . . . . . . . . . . . . . 367

E JavaScript Mini Reference 373

E.1 Operator Precedence and Associativity . . . . . . . . . . . . . . . . . 373
E.2 arguments[] (Core JavaScript) . . . . . . . . . . . . . . . . . . . . 374
E.3 Array (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 374
E.4 Boolean (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 379
E.5 console (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . 380
E.6 Date (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 383
E.7 document (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . 391
E.8 Element (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . 396
E.9 Event (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . . 402
E.10 Function (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 405
E.11 Global Variables, Functions, and Objects (Core JavaScript) . . . . . . 406
E.12 Math (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 409
E.13 Node (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . . 414
E.14 Number (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . 416
E.15 Object (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . 420
E.16 String (Core JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . 421
E.17 window (Client-Side JavaScript) . . . . . . . . . . . . . . . . . . . . 427

x Contents
 Acknowledgments

A huge thank you goes to the guys at Taylor and Francis, especially to my editor Randi
Cohen for her enthusiasm for the whole project, my project coordinator Ashley We-
instein, who oversaw production attentively, and technical reviewers for their detailed
comments making the whole book more enjoyable. Many thanks also to the proof-
reader for correcting typos and grammar. Indeed, it was a great pleasure to work with
such a professional team.

Honestly, all this wouldn’t have happened were it not for Igor and the other guys from
the morning-coffee crew, who suggested that I should really write a book. Thanks,
chaps, it cost me a year of my life. Thank you to all my amazing students for sitting
through my programming lectures and asking nasty questions. Man, how should I
know all that? I shall not forget to also thank the other teaching staff from the team.
The joy of working together is immeasurable. I’m deeply indebted to Žiga, who had
painstakingly read the whole manuscript before releasing it to the wild. (I sincerely
hope you spotted all the silly mistakes so I don’t make a fool of myself.) Thank you,
Andrej, for technical advice on preparing the camera-ready PDF. Those are really
details that make a difference. A thousand thanks go to Tanja and Tadej for that little
push that did the trick. You are terrific!

I also wish to extend my considerable gratitude to everyone that gave away their pre-
cious time, energy, and invaluable expertise answering questions on forums, posting
on blogs, and writing all those wonderful LATEXpackages. It’s impossible to list you
all by name because I’m contracted for only 400 or so pages.

A colossal thank you goes out to my mom and dad for instantiating and personalizing
me. It wasn’t the easiest assignment in the world but you did a marvelous job! Many
thanks to my second parents, Dana and Ivo, for telling me that I should also eat if I am
ever to finish the book. A zillion thanks go out to my close family. Thank you, Erik, for
patiently checking which page I am on with an I-want-my-daddy-back determination;
and thank you, Monika, for tons of understanding and supportive coffee mugs. I love
you!

I am also thankful for the support of the Ministry of Education, Science, and Sport of
the Republic of Slovenia within the research program P2-0246—Algorithms and Opti-

xi
mization Methods in Telecommunications, which made possible some of the research
for this book.

And, of course, thank you, the reader. Without you, this book wouldn’t make much
sense, would it?

—Iztok Fajfar (iztok.fajfar.eu), March 2015

xii Acknowledgments
 Introduction

Easy to Use
Normally, putting honey in my tea is not a particularly demanding task, but that morn-
ing my hand was paralyzed in astonishment, trying to do its routine job of pouring
some honey in the steaming cup. Honey labels usually say things like “All Natural,”
“Contains Antioxidants,” or “With Grandma’s Recipe Book.” Over time, I’ve got used
to more absurd labels like “Improved New Flavor” or “Gathered by Real Bees.” The
label that knocked me out was surprisingly plain, with an award-winning message
printed on it: “Easy to Use.” I don’t recall honey ever being hard to use, except maybe
when it crystallizes, or when I was six months old, but that’s probably not exactly
what the author of the message had in mind.

You can also buy programming books that promise easy and quick learning, even as
fast as in 24 hours. An average adult can read a novel in 24 hours. But let’s face it, no
one can read—let alone understand and learn—a 500-page technical book in 24 hours.
While using honey is not difficult even when it doesn’t explicitly say so, learning to
program is not easy. It can be fun if you’re motivated and have decent material to
study from, but it’s also an effort. If you’re not ready to accept that, then this book
is not for you. Otherwise, I invite you to join Maria, Mike, and me at exploring the
exciting world of computer programming. It’s going to be fun but it’s also going to be
some work.

About the Book

This handbook is a manual for undergraduate students of engineering and natural
science fields written in the form of a dialog between two students and a professor
discovering how computer programming works. It is organized in 13 thematic meet-
ings with explanations and discussions, supported by gradual evolution of engaging
working examples of live web documents and applications using HTML, CSS, and
JavaScript. You will see how the three mainstream languages interact, and learn some
of the essential practices of using them to your advantage. At the end of each meeting
there is a practical homework, which is always discussed at the beginning of the next
meeting. There is also a list of related keywords to help you review important topics

xiii
of each meeting.

The general structure of the book is multilayered: the basic language syntax and rules
are fleshed out with contents and structure while still keeping things simple and man-
ageable, something that many introductory textbooks lack.

The main body of the text is accompanied by five appendices. The first of them con-
tains a solution of the last homework, the second summarizes (also with examples)
some major directions in which you can continue your study, including hints on some
of the relevant sources. The last three appendices are abbreviated references of the
three languages used in the book.

There will be situations when you need to use yet more languages and technologies in
order to get the job done. Some such situations are gently dealt with in this book. For
example, you will learn just enough about a Server Side Includes language to be able
to include external HTML code, which will save you a tremendous amount of time
and energy.

Is This Book for Me?

If you know absolutely nothing about computer programming and want to learn, this
is the book for you. It has been written with a complete beginner in mind in the first
place.

If you have been exposed to programming before, you might find the book useful
as well. Today, many people learn from examples and forums, and thus acquired
knowledge is mostly skills and not much theory. If you ever want to build more
serious software, you need a firm and systematic understanding of what is going on.
You need a framework to which you can systematically attach your partial skills to
form a sound structure of connected knowledge. Hopefully, this book can give you
this as well.

Last but not least, if you’re a teacher of an introductory programming course, you
might find a handful of useful examples and approaches for your classes on the few
hundred pages that follow.

But most likely, as there are as many learning styles as there are learners, you will
have to find out for yourself whether or not this book is for you.

How to Avoid Reading the Whole Book

Don’t panic! If you are only up to JavaScript programming, you can just read Meeting
1 to get a basic idea of what HTML is (you need this in order to be able to run the
JavaScript examples in this book), and then you can immediately skip to Meeting
6—more specifically, Section 6.3. There are some examples involving CSS in the
JavaScript part but they won’t stand in the way of your learning JavaScript. Later, if
you feel like it, you can just as well skim over Meeting 3, where you can get the basic
idea of what CSS is all about.

xiv Introduction
For Your Safety
This book is not about cutting-edge web technologies, so you don’t need any pro-
tective equipment. It is more about general computer programming and some web-
related principles using the mainstream web languages HTML, CSS, and JavaScript
as examples. Some of the principles are over 40 years old, but are extremely important
because they allow you to write cleaner and more easily maintainable code, and they
will not go away just like that.

It’s a busy world, and the sixth edition of ECMAScript standard (the standardized
version of JavaScript) has just entered the official publication process. The good news
is that it only introduces additions to its predecessor, so the essential concepts stay.
Also, while CSS3 isn’t completely finished yet, there already exist some so-called
“level 4” CSS modules. Fortunately, they are also just additions to the CSS standard
and there are no serious plans for a single CSS4 specification on the horizon. This
book pays attention to the basic concepts that have matured with the latest HTML5,
CSS3, and ECMAScript 5 standards to the point where it seems these concepts are
going to persist for some time.

The Software Used

In researching this book, I used Google Chrome and Notepad++ v6.5.3 (notepad-plus-
plus.org ) on a Windows 7 Professional SP1 64bit operating system. I also used the
EasyPHP DevServer 13.1 VC11 web development server (www.easyphp.org ). How-
ever, you will be able to follow most of the examples and experiments in this book
using any modern browser and plain text editor. They are already installed on your
computer, so you can start experimenting right away.

Conventions Used in This Book

The following typographical conventions are used in this book:

A monospaced font is used for all code listings and everything that you normally
type on a keyboard, including keys and key combinations.

A monospaced italic font is used as a general placeholder to mark items that

you should replace with an actual value or expression in your code.

An italic font is used to indicate the first appearance of a term, or as an emphasis.

A sans serif font is used to indicate a menu item.

A sans serif italic font is used to indicate URLs and file names and extensions.

Feedback and Supporting Online Material

I deeply appreciate having any comments, suggestions, or errors found brought to my
attention at the email address [email protected]. You will find source code
of the examples in this book and some additional materials and problems for each
chapter at fajfar.eu/start-programming.

Introduction xv
 About the Author

Iztok Fajfar got his first computer in the early 1980s, a ZX Spectrum with an amaz-
ing 48 KB of RAM. Computers soon turned into a lifelong fascination and an indis-
pensable companion, assisting him in his professional work and hobbies alike. Iztok
has a PhD degree in electrical engineering from the University of Ljubljana, Slovenia,
where he is currently Associate Professor at the Faculty of Electrical Engineering. His
research topics include evolutionary algorithms, in particular, genetic programming.
He teaches computer programming at all levels, from assembly to object-oriented, and
to all kinds of audience. Now and then he even ventures to explain to his mother-in-
law how to forward an email, and he hasn’t given up yet. He is also a programmer
and writer. Iztok lives with his family in Ljubljana, and when he is not programming,
or teaching, or researching weird stuff, he makes the most yummy pancakes, not to
mention the pizza.

xvii
 Meeting 1
Content and Structure

1.1 Opening
Professor: I’m thrilled that you accepted my invitation to help me with a new book
I am researching. There are three languages awaiting us in this course: HTML, CSS,
and JavaScript.

Mike: Why three? You’ll just confuse us, won’t you?

Professor: The languages have been designed for quite specific purposes and work
very differently, so there is little danger in confusing them. At the same time, the three
languages nicely complement each other: HTML holds the structure and content of a
web page, CSS takes care of presentation, and JavaScript is responsible for action. I
like to say that HTML is bones, CSS is flesh, and JavaScript is the brain and muscles
of web programming.

Maria: How much of a chance is there of us learning three languages to the level that
we can use any of them to our advantage?

Professor: You don’t have to be a guru in any of them to start using them effectively.
It’s only important that you know the basic principles. The good news is you don’t
have to install or learn to use any new software. All you need to start off is already
installed on your computer.

Do you have any programming experience?

Maria: Actually, I use a computer a lot but not for programming. I have never written
a computer program before.

Mike: Neither have I.

Professor: In a way, programming is like speaking. You speak English, right?

Mike: Yes...?

Professor: I even know people who have learned Finnish. Quite well, to be honest.

1
English and Finnish are examples of natural languages, which people learn to com-
municate with other people. However, if you want to talk to computers, you have to
learn artificial languages so that computers understand and obey you. It’s very similar.
The only difference is that people won’t obey you if you lack charm, while computers
won’t obey you if you’re not accurate. Accuracy is crucial. Similar to both is that it
takes a certain amount of practice before your interlocutor understands you. I won’t
lie to you on this one.

Maria: I’m just starting to learn Spanish and I must use a sign language a lot. I
suppose you cannot use a sign language with a computer.

Professor: That’s true. In natural languages, people use context and even a sign
language to guess what others have to say even though what they say may not be
grammatically correct. Computers don’t do that, though, and that’s the difficult part
of programming. You have to be exact.

All right. Let’s start programming, shall we?

1.2 Introducing HTML

Professor: To be precise, HTML is not a programming language but it is a so-called
markup language. That’s what the acronym HTML stands for: Hypertext Markup
Language. Markup is a modern approach for adding different annotations to a docu-
ment in such a way that these annotations are distinguishable from plain text. Markup
instructions tell the program that displays your text what actions to perform while the
instructions themselves are hidden from the person that views your text. For example,
if you want a certain part of your text to appear as a paragraph, you simply mark up
this part of the text using appropriate tags:

<p>But it’s my only line!</p>

Maria: It looks quite straightforward. Are those p’s in the angle brackets like com-
mands?

Professor: You could say that. They are called tags and they instruct or command a
browser to make a paragraph out of the text between them.

Mike: That’s like formatting, isn’t it?

Professor: In a way, yes. Tags are like commands in a word processor that allow
you to format paragraphs, headings, and so forth. However, they only specify what to
format, not how to do it.

The above code fragment is an example of an HTML element—the basic building

block of an HTML document. An HTML document is composed exclusively of ele-
ments. Each element is further composed of a start tag and end tag, and everything in
between is the content:

2 Meeting 1. Content and Structure

 Start Tag Content End Tag
<p> But it’s my only line! </p>

The start tag is also called the opening tag while the end tag is also called the closing
tag. By the way, the name, or the abbreviation of the name of the element is written
inside the tags. In particular, p stands for a paragraph. The closing tag should have an
additional slash (/) before the element’s name.

In order for a paragraph to show in the browser, we need to add two more things to
get what is generally considered the minimum HTML document. The first line should
be a special declaration called DOCTYPE, which makes a clear announcement that
HTML5 content follows. The DOCTYPE declaration is written within angle brack-
ets with a preceding exclamation mark and the html keyword after it: <!DOCTYPE
html>. Although it looks like a tag, this is actually the only part of an HTML docu-
ment that isn’t a tag or an element. As a matter of fact, this code is here for historical
reasons. I don’t want to kill you with details, but you have to include it if you want
your document to be interpreted by the browser correctly.

One more thing that the minimum document should contain is a <title> element.
This element is necessary as it identifies the document even when it appears out of
context, say as a user’s bookmark or in search results. The document should contain
no more than one <title> element.

Putting it all together, we get the following code:

<!DOCTYPE html>
<title>The Smallest HTML Document</title>
<p>But it’s my only line!</p>

Maria: You just showed us what the document code should look like. But I still don’t
know where to type the code and how to view the resulting page.

1.3 The Tools

Professor: You can use any plain text editor you like. For example, you can use the
Windows Notepad, which is already on your computer if you use Windows.

Mike: What if I don’t use Windows?

Professor: It doesn’t matter. Just about any operating systems contains a plain text
editor. Personally, I use Notepad++, a programmer-friendly free text editor (notepad-
plus-plus.org ).

After you type the code, it is important that you save the file with a .htm or .html
extension. While it doesn’t really matter which one you use, it is quite important that
you choose one and stick to it consistently. Otherwise, you could throw yourself into
a real mess. For example, you could easily end up editing two different files (same
names, different extensions) thinking they’re one and the same file.

1.3. The Tools 3

Now we open the file in a browser and voilà!

Notice how the content of the <title> element appears at the top of the browser tag.

Mike: How did you open the file in the browser?

Professor: Oh yes, sorry about that. Inside Notepad++, I chose Run→Launch in

Chrome. If you use another browser, it will automatically appear under the Run menu
item in your Notepad++. You can of course also simply double-click the file or drag
and drop it into the browser. Once the file is open in the browser, you don’t have to
repeat this operation. If you modify the source code—the original HTML code, that
is—you simply refresh the browser window. If you use Chrome like I do, you can do
that by pressing F5. Later, you will use more than a single file to build a page. In that
case, you will sometimes have to force reload all files of a page, which you can do
by pressing Ctrl+F5 on Chrome. On Windows, to switch between the text editor and
browser quickly, you press Alt+Tab, a standard key combination for switching between
running tasks.

Maria: What would happen if we forgot to include the <title> element?

Professor: Nothing fatal, to be honest. One of the basic rules of rendering web pages
is that the browser always tries its best to show the content. Of course, if the document
isn’t fully formatted according to the recommendations, the results are sometimes not
in our favor. If you forget the title, then the name of the file containing the document
usually takes over its role. If nothing else, that looks ugly and unprofessional.

1.4 Minimal HTML Document

Professor: One of the general prerequisites to good technical design is simplicity,
which should not be confused with minimalism. In our last example, we saw a truly
minimal HTML document, which you will rarely see in practice. Even with no extra
content it is normally a good idea to flesh out this skeleton HTML document. For in-
stance, most web developers share the belief that the traditional <head> and <body>
elements can contribute to clarity, by cleanly separating your document into two sec-
tions. You pack all the content into the <body> section, while the other information
about your page goes to the <head> section. Sometimes it is also a good idea to wrap
both these sections in the traditional <html> element:
<!DOCTYPE html>
<html>
<head>
<title>The Smallest HTML Document</title>
</head>

4 Meeting 1. Content and Structure

 <body>
<p>But it’s my only line!</p>
</body>
</html>

Mike: I noticed that an element can contain not only text but another element as well.
For example, you placed the <title> element within the <head> element.

Professor: Good observation! The content of an element can in fact be any valid
HTML conforming to the rules of that specific element. We call putting one element
into another nesting. When an element is nested (contains other HTML elements), it
is important that it contains whole elements, including start and end tags. So if, for
example, an <elementA > starts before an <elementB >, then it must by all means
end after the <elementB >:

<elementA > ... <elementB > ... </elementB > ... </elementA >

The element that is contained inside another element inherits some of its behavior,
and we often say that the contained element is a descendant of its owner, which is in
turn its parent. The direct descendant is also called a child. This concept will become
especially important when we come to styling elements with CSS. Now I only mention
it so that later the terms will already sound familiar to you.

Maria: What are those periods inside?

Professor: Oh, yes. A set of three periods is an ellipsis. An ellipsis indicates the
omission of content that is not important for understanding the explanation.

We will soon come back to our last example and furnish it with a little more. For
that purpose we need another element called <meta>. This element is used to pro-
vide additional page description (so-called metadata), which is not displayed on the
page, but can be read by a machine. The information stored in the <meta> element
includes keywords, author of the document, character encoding, and other metadata.
The <meta> element has neither content nor the closing tag:

<meta>

An element that is composed only of the opening tag is called an empty or void ele-
ment.

Mike: I don’t understand that. Where do you put all the information you talked about
if there is no content?

Professor: That’s the job for attributes. An attribute is the means of providing addi-
tional information about an HTML element. For example, by using the src attribute
on the <img> element, one can tell the browser where to find the image to display.
There are two things you should know about attributes: they are always specified after
the element name in the start tag, and they come in name/value pairs like this one:

1.4. Minimal HTML Document 5

 name="value"

The quotes (double style are the most common, but single style quotes are also al-
lowed) around the value are not necessary under HTML5, as long as the value doesn’t
contain some restricted character (mostly =, >, or a space). That said, it is still a good
practice that you always use quotes. Your code will look cleaner and more readable,
which in turn lessens the possibility of errors. Likewise, it is not necessary that you
use lower-case names and values, although it is recommended that you do so.

Some attributes do not have values. All that counts is their presence: they are either
present or not, similar to an electrical switch, which can be put in on or off position.
That type of attribute is called a Boolean attribute after an English mathematician,
George Boole, the inventor of the so-called Boolean logic based on only two values.
Because Boolean attributes have no value (the value is implied by their presence or
absence), we omit the equals sign as well:
name

There are often cases when an element has more than one attribute. In that case the
attributes are separated by spaces.

If I confused you with all this theoretical talking, don’t worry. I will now show you
how this works in practice.

Maybe you’ve already heard about the character encoding. Basically, that’s a system
that tells you how each character of a given repertoire is represented physically. In
a computer, this physical representation consists of a series of ones and zeros, called
bits. Relax, I’m not going into more detail with this explanation. The important thing
is that the browser must know what encoding has been used to store the document
text so it can read it back and show it properly. If you don’t provide the encoding
information to your markup, a browser will of course try to guess it, which may drive
it into an obscure security issue. You should provide this information through the
charset (that’s short for character set) attribute of a <meta> element, assigning it the
value utf-8. Today, more than half of all web pages are encoded in UTF-8 and
honestly, I don’t think you will ever need to use a character that is not included in
UTF-8.

Let’s check if you followed me. Can you add a <meta> element containing a character
encoding attribute to our previous example without my help?

Maria: You didn’t tell us in which section to put it. Let me think.... You said that the
content went into the <body> and all the other information in the <head>. Something
like the following code, perhaps?

<head>
<meta charset="utf-8">
<title>The Smallest HTML Document</title>
</head>

6 Meeting 1. Content and Structure

Professor: Exactly! One more thing here: when saving your work, don’t forget to save
it in UTF-8. For example, if you edit your document with Notepad (on Windows) the
Save As dialog box lets you choose UTF-8 from the Encoding list at the bottom. In
Notepad++, there is a top-level menu Encoding, under which you select Encode in
UTF-8.

Maria: Is the order of the above elements within <head> important?

Professor: Not really. HTML5 only specifies that the character encoding declaration
must be within the first 1024 bytes of the document. Translated into English, always
include it as early as possible.

Mike: What if I wanted to write a page in some other language than English?

Professor: The encoding has nothing to do with the natural language of your web
page. It only defines the set of characters you will use and, as I said before, you
will hardly ever need a character (English or non-English) that is not a part of UTF-
8. I’m glad you asked that, though. Your question takes us to the one last thing
we should add to our basic document. Specifying a web page’s natural language
is considered a good style by many as it can be a useful piece of information for
many users—for example, for filtering web search results by language. Interestingly,
as far I as I know, Google Translate ignores this tag, relying on its own language-
recognition algorithms. Anyway, you specify the language using the lang attribute
on any element. For English, the attribute value will be en, and you can find codes
for many other languages at www.w3schools.com/tags/ref_language_codes.asp. In a
most likely scenario that your whole web page uses a single language (in our case
English) you simply add the lang attribute to the <html> element:

<html lang="en">

By putting it all together we arrive at a decent starting point for any modern web page
you want to build:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Smallest HTML Document</title>
</head>
<body>
<p>But it’s my only line!</p>
</body>
</html>

Mike: I noticed that you indent the code, and even some lines more than others. How
do you know how much to indent which line?

Professor: You don’t have to know that. The indentation you see is in fact completely
optional and without any effect on how the browser interprets the code. At the same

1.4. Minimal HTML Document 7

time it is of the utmost importance for the person writing the code. Notice how the start
and end tags of nested elements “see” each other. This “visibility” is made possible by
indenting the content of an element. That way, the structure of the document stands
out more clearly before the writer. In such a small document the advantage may not be
evident at first glance, but believe me, when a document’s size reaches several hundred
lines, you want to have some order in your code.

Another friendly feature that helps programmers find their way through the chaos
of computer code are comments. In HTML, comments are enclosed in a so-called
comment tag, which starts with a left angle bracket, an exclamation mark, and two
hyphens (<!– –), and ends with two hyphens and a right angle bracket (– –>). For
example:
<!-- This is a comment and will not be visible in the browser. -->

Comments are completely ignored by the browser but quite useful for writing a short
human-readable summary of code, for example. With proper comments, you don’t
need to decipher the code every time you need to upgrade it. Even if it is your own
code, human readable remarks will help you tremendously to understand it later. An-
other practical use of comments is to temporarily switch off parts of code during test-
ing and experimenting.

If you work in a team, or plan to make your code public, it is a good idea to include
your name, contact information, and a licensing notice in comments at the top of your
code. That way, people will have a chance to contact you in case they have questions
about the code.

While comments are not visible in the browser window, be aware that they are acces-
sible to the web page viewer through the View page source menu command. So, don’t
use comments to write filthy remarks about your boss or mother-in-law.

1.5 Formatting a Page

Professor: When I was a little boy, my mother used to read me fairy tales from the
book by Joseph Jacobs, an Australian folklorist, and I still can’t do without them.
That’s why we’re going to mark up the beginning of The Rose-Tree as our next exam-
ple. We will need three more elements for the job: a main heading (the <h1> element)
for the title, an image (the <img> element) to include a fancy decorative capital letter,
and quotes (the <q> element) for quoted speech.

In HTML, you can use six different levels of headings defined by the elements from
<h1> to <h6>. <h1> defines the most important heading while <h6> defines the least
important heading. Since our fairy tale only has one heading, we will of course use
the <h1>:
<h1>The Rose-Tree</h1>

With the image element, as you might have guessed, you can include a picture into a
page. You do that by specifying the file in which the picture is stored using the src

8 Meeting 1. Content and Structure

attribute: the value of the src attribute is the name of the file. Note that <img> is
an empty element so it only has the opening tag. If the image is not a key part of
the content, then it is a good idea to include the alt attribute as well. This attribute
provides a textual equivalent to show in case the image cannot be displayed or until it
is downloaded.

Our fairy tale begins with a letter T. You can use some graphic software to draw a
decorative T and save it to the image file named T.jpg. The final code for our image
element looks like this:
<img src="T.jpg" alt="T">

Because the decorative capital letter is not an essential part of the content, I provided
alternative text, which is obviously the letter T.

Incidentally, not all image formats are supported by browsers. The most commonly
used formats that are supported are .gif , .jpg and .png. In the above code, I used only
the file name without any path as the value of the src attribute. That means that the
file resides in the same folder as the HTML file that contains the above <img> element.
Should the image file be stored elsewhere, I would have to prepend the corresponding
path to it.

The <q> element is used to represent some quoted content and is usually rendered as
a pair of quotes around the marked content.

OK, let’s put it all together. The following code goes into the <body> element:
<!-- From the e-book English Fairy Tales, collected and
-- edited by Joseph Jacobs. Belongs to the public domain.
-- Source: www.authorama.com
-->
<h1>The
Rose-Tree</h1><p><img src="T.jpg" alt="T">here
was once upon a time a good man who had two children:

a girl by a first wife, and a boy by the second. The girl was
as
white as milk, and her lips were like cherries. Her hair
was like golden silk, and it hung to the ground. Her brother
loved her dearly, but her wicked stepmother hated her.
<q>Child,</q> said the
stepmother one day, <q>go to the grocer’s shop and buy me
a pound of candles.

</q> She gave her the money; and the little girl
went, bought the candles, and started on her return. There
was a stile to cross. She
put down the candles whilst she
got over the
stile. Up came a dog and ran off with the candles.</p><p>She
went back to the grocer’s, and she got a second bunch.

1.5. Formatting a Page 9

 She came to the stile, set down the candles, and proceeded to
climb
over. Up came the dog and ran off with the candles.</p>
<p>
She went again to the grocer’s,

and she got a third bunch; and

just the same
happened. Then she came to her stepmother crying, for she had
spent all the money and had lost three bunches of candles.</p>

Deliberately, I made a mess out of the text and tags so that the structure of the docu-
ment is not obvious at first glance. The rendering, however, is quite appealing.

Maria: I notice that the browser does not obey your original text formatting.

Professor: Well.... Yes and no. Actually it obeys the rules perfectly, it’s just that the
rules are a little different from what you might have expected.

The first thing you may have noticed is that the browser ignores spaces, tabs and
newlines. OK, it does not ignore them completely. For example, if there is a separation
between words, it is replaced by a single space regardless of what I have actually put
there: a space, tab, newline, or even more of them. A rule of thumb is that spaces,
tabs, and newlines are ignored unless they represent the only separation between two
entities—words, for example. Even then they are replaced by a single space. If there
exists some other separator like, for example, a tag or equals sign (=), then spaces
are not needed at all and it doesn’t matter whether they are there or not—the result is

10 Meeting 1. Content and Structure

always the same.

That said, there are a few cases where you should be careful about spaces:

• Do not put any spaces before the element name in the opening or closing tag. It
would be wrong to write < p> or < /p> or </ p>.
• Do not put any unnecessary spaces between double quotes when writing at-
tribute values. In that sense, lang="en" is quite different from lang=" en "
while lang = "en" is still OK while it does not change the meaning.
• You should always put spaces between two attributes of the same element, even
when there’s a quotation mark at the end of a value. For example, it would be in-
correct to write <img src="T.jpg"alt="T"> instead of <img src="T.jpg"
alt="T">.

It is important at this point that you start seeing HTML as a language that gives a
document a structure and meaning rather than a specific look. How a page looks is
taken care of by the browser. Later, we will control the document’s look by means of
CSS.

Mike: I have a question. If spaces and newlines do not affect the text formatting, how
can you tell the browser to start, for example, some text on a new line?

Professor: This kind of formatting is implied in the element meaning or semantics.

For example, it is usual practice that a heading or a paragraph is displayed as a block
of text occupying the whole line—nothing else can be positioned on the same line in
a browser window. In other words, a line break is inserted before and after a heading
or paragraph. We say that such elements have a block display. On the other hand, an
image can happily inhabit a line together with other elements, if there is enough space,
of course. Such elements are said to have an inline display.

You’ll see later that it is possible to change a type of display for an element using
CSS. Doing that, however, does not change the intrinsic HTML categorization of el-
ements. For this reason we will use the terms inline element and block element to
denote elements that have an inline or block display by default.

Mike: But what if I simply want to break a line without making a paragraph or using
any other block element? Is there a way to do that?

Professor: There’s an element for breaking a line called <br>, which is short for
break. Paradoxically, that element should not be used for breaking lines unless you
are breaking lines because you want to convey some meaning. Typical examples are
breaking lines in poems or postal addresses. If you want to break a line because
you are introducing a new paragraph, then you shouldn’t use the <br> element. A
paragraph is a meaning by itself and doesn’t need other elements to promote line
breaks. If you don’t like the amount of space between paragraphs, however, that’s not
a matter of semantics. You take care of stuff like that by using CSS.

Mike: I’ll try to remember that, but I think I’ll have to wait to get some experience to
fully understand it.

1.5. Formatting a Page 11

Professor: That’s true.

Maria: What happens with text that is written outside of any element?

Professor: Oh yes, that is extremely important. I’m glad you asked. It is strongly
recommended that you do not put any plain text directly into the body. It is a good
practice that you mark up every text and that you mark it up properly. I believe that’s
easier said than done, but as we go along you will get some experience and feeling
about how to get it right. All you have to be careful about is to think of the role of
the text you are writing: is it a heading, a paragraph, a caption, a sidenote? When you
decide upon the role of the text, your next step is to pick up an appropriate HTML
element to mark up that text. If none seems right, then generic <span> and <div>
elements come in handy, but more on these later.

Mike: Is HTML case sensitive?

Professor: For the most part, no. However, just to stay on the safe side, I strongly
recommend that you only use lower-case letters. If nothing else, it will save you the
trouble of remembering whether case matters or not.

1.6 Homework
Professor: Before we call it a day, let me just give you lots of homework. Note that
it’s not important that you do everything right. The important thing is that you do it
on your own and that you ask yourselves questions about why things work (or don’t
work) the way they do. Write down any unresolved questions, which we will use in
our next meeting.

I encourage you to search and use, apart from the material we covered today, other
sources as well. That’s important. Because of the constant progress of technology,
you’ll always be searching for new answers. For your convenience, I prepared some
reference material you will find at the end of this book. However, this is not a complete
reference. I have only put into it what I thought would be important for our course.
So if something is not there, that doesn’t mean it doesn’t exist. For the time being, I
recommend that you use the site www.w3schools.com, which offers a decent learning
experience for a beginner. One more good thing about this site is that it includes lots of
working examples ready for you to play with. When you level up, however, I suggest
that you start using other, more profound sources to learn from.

And now the homework. I have prepared for you a short document on wombats, which
I want you to reproduce as faithfully as you can while using only HTML. If you don’t
like the picture, you can use another one. Personally, I like this old drawing of the
now-extinct wombats of King Island, Tasmania, by Charles-Alexandre Lesueur from
1807.

Here’s how the document should look:

12 Meeting 1. Content and Structure

For some more homework, here is a short list of keywords covering today’s meeting.
Draw a mind map using all the given keywords, adding some more if you feel like it.

In this meeting: element, start tag, end tag, content, indentation, comment, nested
element, DOCTYPE, descendant, parent, child, markup, empty element, void ele-
ment, attribute, attribute name, attribute value, Boolean attribute, <html>, <head>,
keywords, author information, <meta>, <title>, <body>, <p>, <img>, <h1>,
<br>, alt, src, charset, lang, block display, inline display, block element, in-
line element, spaces, generic elements, semantics

1.6. Homework 13
 Meeting 2
Building a Sound Structure

2.1 Homework Discussion

Professor: I am anxious to see what you have written since our last meeting. Did you
have any trouble?

Mike: At the beginning, yes. I had to read about lists and tables to complete the
homework.

Professor: No offense, but I am sort of glad you mention tables because that’s a sure
signal you did it wrong. Don’t panic, though. That mistake will help you tremendously
with mastering basic HTML principles. What about you, Maria?

Maria: I don’t know.... It wasn’t as easy as it looked and I have some questions.

Professor: Good. So we have material to talk about. Mike, what did you use a table
for?

Mike: I haven’t found any other way to wrap text around the picture. And honestly, I
had that annoying feeling that this is not the way to go. Namely, I had to split the text
between two cells of the table in order to wrap it around the image. The whole thing
only looked good till I resized the window. So how can this be done properly?

Professor: As I already mentioned in our previous meeting, HTML is used to give a

document a structure rather than a look. So there is always one very important ques-
tion to bear in mind when constructing an HTML document: is what I’m trying to
do in any way affecting the structure of the document or is it merely a matter of pre-
sentation? Indeed, wrapping a text around a picture has nothing to do with structure.
A paragraph is a paragraph and a picture is a picture, no matter how they are posi-
tioned and formatted. You don’t have to worry about whether a paragraph is wrapped
around a picture when writing an HTML. That’s work for CSS. I’ve deliberately pre-
sented you with a document that will tempt you to think about how it looks, which is
completely irrelevant at this point.

Mike: So it’s not possible to wrap text using pure HTML?

15
Professor: No.

Maria: Why not? I managed to find an attribute called align, which aligns a picture
to one side (left or right) and wraps text around it nicely. Have I missed something?

Professor: You missed one thing. The align attribute is deprecated since HTML4.01
and obsolete since HTML5, and not without a reason. Nearly all elements and at-
tributes that were historically used for presentational purposes are considered obsolete
in HTML5. That doesn’t mean they don’t work, though. Worse still, they will work
for quite some time for backward compatibility. Browsers are really forgiving when
rendering a markup. You won’t notice that you did something wrong because the mis-
take won’t show. It is entirely up to you whether you conform to the rules or not. If
you want to build sound web pages, the HTML is the most important thing to do right
because it serves as a foundation of your whole web page. Sticking to plain, simple
HTML is also important because it keeps search engines happy. The old HTML’s ap-
proach of using formatting elements like <font>, or tables to lay out a page, stands in
the way of a search engine’s job.

Mike: Is there really no way of testing whether your HTML is written properly?

Professor: In fact there is. When in doubt, you can resort to one of many on-line
HTML validators (for example, validator.w3.org). You can upload your document to a
validator and it will alert you to any errors you may have in your HTML document.

Maria: I think I see things more clearly now and meanwhile you also answered some
of my questions. I even discovered another mistake I made: I used the <h2> element
for the main heading (Common Wombat) since the <h1> seemed too big to me. If
I understand correctly, I shouldn’t have done this because I was actually concerned
about presentation. In fact I should have used <h1> because this is the main heading.

Professor: Exactly! When writing HTML, you shouldn’t worry about font size.

Maria: What still puzzles me are the elements <b> (bold) and <i> (italic), which I
found in the reference you gave us. Is this not presentation?

Professor: If you use them properly, then the answer is no. Those two elements
survive from the past but with a different, more semantic interpretation. In modern
HTML, it would be wrong to use <b> and <i> elements merely for the purpose of
making text bold or italic. It is also wrong to think of <b> and <i> elements as being
old elements now replaced by the <strong> and <em> elements only because they
are rendered in the same way by many browsers. The <strong> element is used to
express strong importance of its content and the <em> element is used to emphasize
its content. The <b> and <i> elements are not used to stress importance or emphasis.
Rather, they are considered as generic bold and italic elements used in cases when
normally—but not necessarily—bold and italic fonts are used. Because the meaning
of these two elements is not evident from their names, authors often use the class
attribute to clearly identify their semantic meaning. For example:

<i class="latin-taxonomy">Vombatus ursinus ursinus</i>

<b class="english-definition">bare-nosed wombat</b>

16 Meeting 2. Building a Sound Structure

The class attribute not only gives a clear meaning to both elements but also allows
CSS to access these elements for formatting purposes—but more on that later.

Mike: There’s one more question bothering me. I have found an element for writing
unordered lists (<ul>) and I’m not quite sure whether I should put it inside a paragraph
or not. A list, in my opinion, is a part of a paragraph but visually it is represented as
a separate block. I know that I am mixing two concepts, which you’ve just clearly
separated, but in this case my thinking is a bit blurred.

Professor: I agree that it is a matter of debate whether a list is a separate paragraph

or not. In practice, things are sometimes not as clear as in theory. Luckily, in this
special case we have recourse to the additional rules concerning context in which
certain HTML elements can appear, and the content that they are allowed to include.
One or both of the terms also appear with some of the element descriptions in the
concise reference at the end of this book. For example, you will find that the <p>
element should only contain text and inline elements. Because the <ul> element is a
block element, you shouldn’t put it inside a <p> element.

Mike: You have already told us about the block-inline categorization of elements
based on their default display setting, but I’m still confused. When you are talking
about display, isn’t that presentation?

Professor: You couldn’t be more right about that. In HTML5, a display has be-
come purely a CSS term since it defines the visual behavior of an element. In the
past, the categorization of block and inline elements helped authors in deciding which
element is allowed as a content (descendant) of the other. In HTML5, this binary cat-
egorization has been replaced by a more complex one and you will hear terms like
the flow content, sectioning content, phrasing content, and so on. If you are inter-
ested in studying these (which I don’t actually recommend at this stage), I suggest
that you visit the site developer.mozilla.org , which is written on a higher technical
level than www.w3schools.com, but still more understandable for a beginner than the
World Wide Web Consortium’s (W3C) page, www.w3.org, which publishes original
web standards and is quite a demanding read.

To keep things simple, some authors equate the flow content category roughly with
the block display category and the phrasing content category roughly with the inline
display category. This block-inline categorization is easier to understand. That’s why
it is still used by some authors.

As a rule of thumb, an inline element can only contain inline elements while a block
element can contain inline elements as well as block elements. A notable exception
to the rule are elements <p> and <h1> to <h6>, which are block elements but cannot
contain block elements. Again, when in doubt, you can use an HTML validator.

OK, that’s it. Here is a possible final solution of your homework:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

2.1. Homework Discussion 17

 <title>Common Wombat</title>
</head>
<body>
<h1>Common Wombat</h1>
<p><img src="King_Island_wombats.jpg">
The <b class="english-definition">common wombat</b>
(<i class="latin-taxonomy">Vombatus ursinus</i>), also called
<b class="english-definition">bare-nosed wombat</b> or
<b class="english-definition">coarse-haired wombat</b>, is
one of three living wombat species. The common wombat reaches
an average of 98 cm in length and a weight of 26 kg. It
prevails in colder and wetter parts of South East Australia.
The common wombat was first described by George Shaw in 1800.
</p>
<p>
There exist three subspecies of the common wombat:
</p>
<ul>
<li><i class="latin-taxonomy">V. ursinus hirsutus</i>
on the Australian Mainland.</li>
<li><i class="latin-taxonomy">V. ursinus tasmaniensis</i>
in Tasmania.</li>
<li><i class="latin-taxonomy">V. ursinus ursinus</i>
on Flinders Island to the north of Tasmania.</li>
</ul>
</body>
</html>

Note that text will not wrap around the picture because, as I already pointed out, this
cannot be done using only HTML.

2.2 Lists and Tables

Professor: I’m glad that you succeeded in finding and using unordered list on your
own. Still, I would like to point out some things about elements <ul> (unordered list)
and <ol> (ordered list). Basically, they are the same, only the first one is used when
the order in which the items are listed is completely irrelevant, while the second one is
used when the order is important. The items in an unordered list are usually preceded

18 Meeting 2. Building a Sound Structure

by bullets while in an ordered list they come with ordinal numbers or letters. The use
of lists is quite straightforward. There’s one thing, however, you need to be careful
about.

If you look at element descriptions in the reference at the end of this book, you will
notice that the elements <ul> and <ol> alike can only contain <li> (list item) ele-
ments and nothing else. Since a list is composed of items, this is hardly a surprise.
Still, many people find themselves completely at a loss for where to put sublists. As
we already discussed, browsers are quite tolerant of bad HTML code and you won’t
know whether you did it right unless you use a validator. So, let me ask you a ques-
tion. Where do you think one should put a sublist? Or, more specifically, could you
write HTML code for the following list?

Maria: Let me think. A <ul> element can only contain <li> elements. That means
that I cannot put another list inside a list. On the other hand, a sublist should be a part
of a list. Now, the only possibility I see is to put a sublist inside an <li> element. Am
I right? Like this:

<ul>
<li>New South Wales
<ul>
<li>Birrahgnooloo</li>
<li>Dirawong</li>
<li>Wurrunna</li>
</ul>
</li>
<li>Queensland
<ul>
<li>Dhakhan</li>
<li>I’wai</li>
<li>Yalungur</li>
</ul>
</li>
</ul>

Professor: Perfect! When you think of it, a sublist in fact always relates to a specific
list item rather than a list as a whole. It is therefore the only logical solution to put a

2.2. Lists and Tables 19

sublist inside a list item.

Lists allow authors to organize document data in a specific way. Another such element
is <table>. Just like lists, the <table> element also has its content limited to a
small number of allowed direct descendants. Amongst them you’ll find an optional
<caption> element and an obligatory <tr> element. Each <tr> (table row) element
represents a row in a table and its only direct descendants can be <td> (table data)
and <th> (table header) elements. The former represent table data cells and the latter
table header cells. You can stretch any data or header cell over more rows or columns
using their rowspan and colspan attributes, respectively. The <caption> element
holds the table caption and should appear before any <tr> elements.

Here’s a complicated example:

<table border="1">
<tr>
<td rowspan="3"></td>
<th colspan="4">Imports</th><th colspan="4">Exports</th>
</tr>
<tr>
<th>Value</th><th colspan="3">Annual change (%)</th>
<th>Value</th><th colspan="3">Annual change (%)</th>
</tr>
<tr>
<th>2010</th><th>2008</th><th>2009</th><th>2010</th>
<th>2010</th><th>2008</th><th>2009</th><th>2010</th>
</tr>
<tr>
<td>Mozambique</td>
<td>1,200</td><td>10.6</td><td>-2.5</td><td>19.0</td>
<td>2,600</td><td>5.1</td><td>1.5</td><td>25.4</td>
</tr>
<tr>
<td>Kyrgyz Republic</td>
<td>300</td><td>1.9</td><td>0.5</td><td>6.7</td>
<td>500</td><td>2.1</td><td>-1.5</td><td>2.9</td>
</tr>
</table>

And the result in the browser.

20 Meeting 2. Building a Sound Structure

Exploring the Variety of Random
Documents with Different Content
This book was produced in EPUB format by the Internet Archive.

The book pages were scanned and converted to EPUB format

automatically. This process relies on optical character recognition,
and is somewhat susceptible to errors. The book may not offer the
correct reading sequence, and there may be weird characters, non-
words, and incorrect guesses at structure. Some page numbers and
headers or footers may remain from the scanned page. The process
which identifies images might have found stray marks on the page
which are not actually images from the book. The hidden page
numbering which may be available to your ereader corresponds to
the numbered pages in the print edition, but is not an exact match;
page numbers will increment at the same rate as the corresponding
print edition, but we may have started numbering before the print
book's visible page numbers. The Internet Archive is working to
improve the scanning process and resulting books, but in the
meantime, we hope that this book will be useful to you.

The Internet Archive was founded in 1996 to build an Internet

library and to promote universal access to all knowledge. The
Archive's purposes include offering permanent access for
researchers, historians, scholars, people with disabilities, and the
general public to historical collections that exist in digital format. The
Internet Archive includes texts, audio, moving images, and software
as well as archived web pages, and provides specialized services for
information access for the blind and other persons with disabilities.

Created with hocr-to-epub (v.1.0.0)

The text on this page is estimated to be only 0.33%
accurate

^ m:.::i^ M S 4 J^3* l> .^ J 1^' T- r i^'j^' ^t i^ •?^ :l§

J^_# i^fc ^ -J^.i! ICiC |lj^^> . '^ >' ,.,-: /^ !M .m -M t^ (^^ 0 0 -
>f M -M": ' %»' ' m n: ^ m f:¥-':^ >. % k> - ' , «i ^ :" :^ 0 -0
ir..;*^ ii? j/ ii- ^ m 'i/W M-m ■^: •!%! n ^ i^; ii^^ % ■/ p :^ 1^^
0 w 0. ^-^ -^ : ■ -^ M j» m ¥' # ^^ u 'i>' n .n ':ii: .1^ K h ^^^ ..
m f '- ' " ■ ' %. |^, ^i. f^ ^^ |3»^ i^ # M ^ *r: ;# 4« 1^ . , y 1^
^,r , .l^.^' it :li: H .''I ^'C w % %j. f.h^'; % U t■,'a'. JJii «i ija t^i ."i
I*; # jr J?j % M '^ li ^ ^. t iv 1^; 1=. .,..• ,., „ ¥ p ii n M F w 1^ i^
i^^' ji^ u m >* ii5" 1^ 0- #' li j^ j; i^v M^ i^i .^' iii' n. 1^ r:'/^'. ij
i^. h f' r ^'" > \f m 1^ m W. ^ )P ili j;^ |4^ 1/^ ll^ Ix l> |r /;. i>i
It' E >;. -i,^:' /{^, (?; p. I', r. g; j^. r> i^/ 1 i.t i:;^ ^:^ ^ ;? i/ : ^'
1^ j^' If I?' .■ ■ ; • •■ ■ ijt/ 1^ |;v ^•^' 1*^ j4 h K 1^ ., -; / 'P. 5',
|/ , .. ■ ^^' >■ ^ f^ j^ i> :l^' $^ U^ 0 f^ ^ i/ i^' ^f i^'^- i fh h |n
I-; ;y, ; /f , >■ ^i. ,i. ■ ^ if ...^^ ;r ^* i^ i^/ |.< ,. ,. y 0 2^ ,- r i>
k P. % % n> K f^ ■/■; ^*. f ii^ ii^ ^' i?^ r- r ^■■ i4' ^^- > ,M
)^^ ;^^ ^< 1^ 1.^ ^^' ;/ |r ^/ ^/' ;?'■ ■: . .1^. y" k ii ^i- 7^ ii'.
f: >'.:. k r. ^.; i/., /?-; ^ M li\ 0 -^ W .!> ^^ ^^' A' ^' i^/ '*. i. i^'
©^' /?
The text on this page is estimated to be only 1.69%
accurate

\> .^ %. .0^ \ •^.T' ,0^ X '^^. ^*^ ."• .0 -" c « o „*■

c.>' ■C.. - 0 ,«^ .^^ ■u. ^.' «o
The text on this page is estimated to be only 0.67%
accurate

^^^ °t. "'•"''•■

 :AL0GY AND BIOGRAPHY OF LEADING FAMILIES OF THE '
OF BALTIMORE AND 3AL"';iMORE COUNTY MARYLAND ^NG Portraits
of Many Well Known nZENS OF THE PaST AND PRESENT NV
The text on this page is estimated to be only 0.00%
accurate

^'f.^
EARLY DAYS OF MARYLAND
 PREFACK 'HE greatest of English historians, Macaulay, and
one of the most brilli present centur>', has said: "The history of a
country is best told in a record _ people." In coufurmity with this
idea, the Portrait and Biographicai county has been prepared.
Instead of going to musty records, and taking therefr ma tier that
can be appreciated by but few, our corps of writers have gone to tht
and women who have, by their enterprise and industn,-, brought the
county. to a ran among those comprising this great and noble state,
and from their lips have the st struggles. No more interesting or
instructive matter could be presented to an in In this volume will be
found a record of many whose lives are worthy the imita
generations. It tells how some, commencing life in poverty, by
industry and accumulated wealth. It tells how others, with limited
advantages for fecuring an e become learned men and women, with
an influence extending throughout the length a the' land. It tells of
men who have risen from the lower walks of life lo -Mience as s
whose names have become famous. It tells of those in every walk in
life -vho h succeed, and records how that success has usually
crowned their efforts. It tells also • many, who, not seeking the
applause of the world, have pursued "the e%'en tenor ol their w:
content to have it said of them, as Christ said of the woman
performing a deed of mercy— ' T hey 1 done what they could." It
tells how that many in the pride and strength of young m.inliooc the
plow and the anvil, the lawyer's office and the counting-room, left
every trade and prof'^ and at their country's call went forth valiantly
"to do or die," and how through theii cfTorl Union was restored and
peace once more reigned in the land. In the life of every man and of
woman is a lesson that should not be lost upon tho.se who follow
after. Coming generations' will appreciate this volume and preserve it
as a sacred treasun-, fn fact that it contains so much that would
never find its way into public records, and wl ich otherwise be
inaccessible. Great care has been taken in the compilation of the
work, ui opportunitv possible given to those represented to insure
correctness in what has been v, the publishers flatter themselves
that they give to their readers a work with few errors of co; In
addition to the biographical sketches, portraits of a number of
representative citizens ar The faces of some, and biographical
sketches of many, will be missed in this volume the publishers are
not to blame. Not having a proper conception of the work, .some
refu the information necessary to compile a sketch, while others
were indifferent. Occasio member of the family would oppose the
enterprise, and on account of such opposition ine the interested one
would be withheld. In a few instances \nen could never be founl
repeated calls were made at their residences or places of business.
Chapman Publishins November, 1897.
 p 3 EARLY DAYS OF MARYLAND. 0F THE beauties and glory
of Marjland historians have written and poets sung. From the far
distant days in its early settlement, over which time has thrown the
halo of romance, to the present age of thriving cities and valuable
country estates, there has been a constant material and commercial
development, and we, who stand in the final lustrum of the
nineteenth century, may look back over the more than two hundred
and fifty years of Maryland's history, with the realization that her
name is high in the galaxy of states and her citizens illustrious in the
annals of the nation. She has given to the world men of eminence in
every walk in life; gifted orators and men of public affairs, such as
Luther Martin, William Wirt, Daniel Dulany and William Pinkney;
poets whose names are household words throughout the entire land,
such as Francis Scott Key and Edgar Allen Poe; and a host of other
men, whose wonderful natural gifts have been heightened bj* every
resource of science or art and by every facility for intellectual
advancement. The history of Mar>iand is best told in the lives of the
people. Their prosperity has meant her advancement, and their
suffering her adversity. The character and progress of a state is
largely dependent upon its first settlers. The I)eople of New England
may in some measure owe the characteristics for which they are
noted to the influence of climate and environment, but to a large
extent tiiey are due to the all-permeating influences of ancestry, bj-
which is moulded, for weal or woe, the destiny of generations yet to
come. The' people of Pennsylvania, also, still bear in their characters
the impress of their Quaker forefathers, while the enterprise of the
citizens of New York to-day is largely inherited from their ancestors,
the thrifty and energetic pioneers of New Amsterdam. Very
appropriately, then, we may review the history of the early
settlement of Maryland; and from the records of its pioneers gain an
insight into the traits that characterize their descendants of to-day.
LORD BALTIMORE. George Calvert, Baron of Baltimore, was born in
Yorkshire, England, in 1582. When a young man he became
secretar>- to Sir Robert Cecil, later was made clerk to the privy
council, and ultimately served as secretarj- of state to James I. This
positi m, however, he resigned in 1624, because of his conversion to
the Roman Catholic religion, ''n 1625 he was given the title of Baron
of Baltimore, in the kingdom of Ireland. During his secretary.ship he
obtained a grant of the province of Avalon, Newfoundland, and
made an effort to secure a settlement there, but failed. Believing
that he couUi succeed in a more favorable climate, he visited
Virginia, and was immediately impressed by the facilities presented
for .settlement upon the Chesapeake Bay. Returning to England, he
obtained a grant of the province of Mar>'land from King Charles, but
early in 1632, when his charter was ready for pas.sage under the
great .seal, he died, and the grant was inherited by l.i:, son, Cecilius
Calvert, to whom the charter of Maryland was granted, June 20,
1632. The granting of Mar>'land to Lord Baltimore aroused the
indignation of Virginian colonists,
 EARLY DAYS OF MARYLAND. owing to the fact that the land
lay within the limits of Virginia according to its charter government,
and they still considered it a part of their possessions, although the
original charter had been annulled and the colony was under royal
government after 1625. Some of the residents of the Old Dominion
presented a petition to the house of commons, asking for the
restoration of the ancient patents, but the governor and council of
the colony remonstrated against a change of charter, and the king's
reply, in July, 1642, allayed whatever fears they may have had on
the subject. In 1658 the province of Maryland was surrendered to
Feudal 1, the proprietary's governor, after which nothing more is
heard concerning Virginia's claim of Maryland. BOUNDARY
DISPUTES. While, however, there was no further trouble regarding
the claim, its territorial limits continued for many years to be the
source of constant contention. Not only were there frequent disputes
with Virginia as to the location of Watkin's Point, upon which
depended the boundary line between the eastern shores of Virginia
and Maryland, but there was also considerable controversy with
William Penn about the northern and eastern boundaries. When
James, Duke of York, and a friend of Penn, came to the throne, the
latter presented an application for a new grant, and met with
success, for in November, 1685, the commissioners of trades and
plantations, to whom the matter had been referred, decided that
Lord Baltimore's grant included only " lands uncultivated and
inhabited by savages, and that the territory along the Delaware had
been settled by Christians antecedent to his grant, and was
therefore not included within it," and they directed that the
peninsula between the two bays should be divided into two equal
parts by a line drawn from the latitude of Cape Henlopen to the
fortieth degree of north latitude; and that the western portion
belonged to Baltimore and the eastern to Penn. When the
goverimient of England was taken from the hands of James and
given to William of Orange, the anti-Catholic feeling that had been
fostered by attending circumstances, extended to the province of
Maryland, and a Protestant association was formed by John Coode
and others, to supersede the proprietary government, which object
they attained in 1689; but the next year it was taken from them and
afterward remained a royal government until 1716. A compact was
entered into, May 10, 1732, between Lord Baltimore and John,
Richard and Thomas Penn, the sons of William Penn by his last
marriage. This agreement provided that the boundaries should
consist of a line beginning at the easternmost part of Cape
Henlopen, and running due west to the exact middle of the
peninsula at that point, and of a line running from that middle point
to the north, forming a tangent to a circle drawa around Newcastle,
with a radius of twelve miles. In adjusting the boundary between
Marjland and Pennsylvania, the agreement provided that it .should
begin, not at the fortieth degree of latitude as previously provided,
but at a latitude fifteen English statute miles south of the most
southerly part of Philadelphia. However, the commissioners
appointed to carry out this agreement were of such different
opinions that further negotiations became impossible. Finally, in May,
1738, it was decided to run a temporary line, to be used until the
final adjustment was made, and the following year this provisional
line was actually run. The final decision regarding the boundary was
still a matter of doubt when Charles, Lord Baltimore, died, in April,
1751, and it was left to his heir, Frederick, to bring to a culmination
the plans for the adjustment of the permanent boundary, which was
finally decided upon by commissioners, appointed for the purpose,
and who were engaged in the performance of their duty from
November 19, 1760, to November 9, 1768. EARLY SETTLEMENTS.
The first settlements within Maryland , made under the proprietary,
were at and near St. Mary's City, and were made in 1633-34. Prior to
this a small settlement had been made on Kent Island, which, after
Clayborne's rebellion, was brought into submission and formed the
nucleus of the eastern shore settlements. For .some years
 EARLY DAYS OF MARYLAND. afterward these two points
were the only settlements in the province, and they formed the
nucleus from which sprang other settlements. Talbot County was
erected in 1661, Somerset in 1666, Cecil m 1674, Dorchester in
1669, yueen Anne in 1706, Worcester in 1742 and Caroline in 1773.
About 1659 Baltimore County was formed out of the territory north
of Anne Arundel, and a proclamation June 6, 1674, declared that its
southern boundaries should be "the south side of Patapsco River,
and from the highest plantations on that side of the river, due south
two miles into the woods." Cecil County was erected in 1674, by the
proclamation of the governor, Charles Calvert, its boundaries being
described as e.xtending "from the mouth of the Susquehanna River
down the eastern side of the bay to Swan point; thence to Hell
point, and so up Chester River to the head thereof." These bounds,
slightly varied a few days afterward, remained until the act of 1706,
which enacts that "Cecil County shall contain all the lands on the
north side of the Sassafras River and Kent County, and shall be
bounded on the east and north by the bounds of the province, on
the west by the Susquehanna and the bay, and on the south by the
Sassafras River and Kent County. Harford County was created in
1773, by an act which declares that ' 'its bounds shall begin at the
mouth of the Little Falls of Gunpowder River, and run thence with
said falls to the fountain head; thence north to the line of the
province; thence with that line to the Susquehanna River: thence
with that river to the Chesapeake Bay; thence with the bay, including
Spesutia and Pool's Islands, to the mouth of Gunpowder River; and
thence up said river to the beginning." THREE HISTORICAL EPOCHS.
The history of Maryland up to the Revolution naturally divides itself
into three periotls. The first of these extends from the first
settlement to 1688, when events were shaping themselves toward
the formation of the Protestant a.ssociation. The second epoch
extends from 1688 to the restoration of proprietary power in 17 15,
and the third period from that time to the treaty concluded in Paris,
in 1763. During the one hundred and thirty years comprised within
these three epochs, the colony had developed from its incipiency to
a prosperous commotiwealth. Indians had disappeared before the
advance of civilization. Cities had been built, and forests transformed
into beautiful plantations, where men and women labored happily
and successfully. Settlements had been enlarged and extended, and
commercial resources had been developed. Upon the fair name of
the state is no stain of religious persecution, no stigma of the
exercise of tyrannical power over the red men of the forest. It was
the policy of the men who shaped the government to protect all who
were under it, and hence persecution was almost unknown in the
province. "The annals of Maryland, " in the words of Dr. Ramsay,
"are barren of those striking events which illustrate the page of
history. This is probably the reason that so little of its history has
been published. Its internal peace in the period ot infancy was but
little disturbed, either by Indians or insurgents, though not wholly
exempt from either. Its early settlers loved their king and their
proprietary. They were not given to change, but attached to ancient
forms, their native country and its constitution." By those who are
familiar with the early history of America it will be remembered that
the majority of people who sought homes here did so in the hope of
securing religious freedom. For a somewhat similar rea.son were the
men influenced who became the pioneers of Maryland. George
Calvert was an adherent to the doctrines of the Roman Catholic
Church, and while he stood in favor with the king, his religion was
proscribed and embarrassment to himself ensued. Without doubt,
his thoughts must have often turned to a country where he might
have freedom to worship as the dictates of his conscience directed.
He visited Virginia, but found there the same intolerance to
Catholicism exhibited in his native land. Then it was that he was
attracted to the land lying on both sides of Chesapeake Bay, a land
that seemed unexcelled for fertility of .soil and beauty of climate,
and a land that was as yet unclaimed. His ambitious spirit prompted
him
 EARLY DAYS OF MARYLAND. to attempt to found a
settlement here, and had it not been for his untimely death he would
have witnessed the triumph of his undertaking, the success of his
enterprise. The spirit which prompted him, and the energy
characteristic of his every action, were inherited by his son, Cecilius,
who, unable to accompany the expedition in person, consigned it to
the care of his brother, Leonard. THE PILGRIMS OF MARYLAND.
November 22, 1633, about two hundred persons took passage from
the Isle of Wight, en route to the new world, taking with them all
their worldly possessions, and a large stock of courage and hope,
without which .such an expedition would have soon failed. The most
of the voyageurs were Roman Catholics, and some were gentlemen
of wealth. It was on the 24th of February, 1634, when, weary with
the long voyage upon the ocean, they landed at Point Comfort, Va.,
and from there they sailed up the Potomac in search of a site for the
colony. They journej'ed up St. Mary's River about seven miles, until
they came to an Indian town, Yaocomoco. The first act of the
governor, Leonard Calvert, was to purcha.se the town from the
Indians and secure their consent to hi.'- residence within it. March
27, 1634, the pilgrims of Maryland landed at Yaocomoco and laid the
foundations of the old town of St. Mary's and of the present
commonwealth. At the expense of the proprietary, the colony was
provided with implements for farming, provisions and clothing, and
material for the erection of houses. During the first few years of its
establishment, the proprietary expended upon it about forty
thousand pounds sterling. His kindness, however, was not limited to
the gift of money and materials. What was far better, his policy of
government was exceptionally good, and aroused the confidence of
the settlers as well as secured their happiness. The freemen were
convened in assembly, and were made to realize that the
government was their own. Religious liberty was allowed. Courts of
justice were introduced and the administration of law was strict and
firm. For seven years the colony pro.spered, and when trouble
arose, it was from without, not from within. The succeeding years
were years of strife, occasioned largely by the hostile acts of William
Clayborne, whose name is identified with almost every act of
hostility to Maryland during the first twenty-five years of its
settlement. In Julv, 1656, Josias Feudal) was commissioned governor
by the proprietary, and the province formally surrendered to him,
March 20, 1658. However, his rule was of short duration, and
proprietary government was again established. In 1662 Charles
Calvert was sent to the province as its governor, and he continued to
reside there until the death of his father, Cecilius, Lord Baltimore,
which occurred November 30, 1675. His son, Charles, then
succeeded to the title and estates, and, naming his son, Cecil, as
nominal governor, he departed for England, but found himself and
his goverinnent the subject of complaint there. Some of the resident
clergy of the province had made representations to the heads of the
established church in England, declaring that there existed
immoralities that required redre.ss, and as a remedy they proposed
the establishment and endowment of lands. The answer of the
proprietary was easily made. He referred to the permanent law of
the province, tolerating all Christians; and to the impracticability of
procuring the exclusive establishment of any church, and he was
released from the subject by the injunction to enforce the laws
against immorality and to endeavor to procure a maintenance for the
support of some of the clergy of the church of England. In February,
1680 (new style"), the proprietary returned to Maryland, where he
remained until 1684, and then went back to England, where the
peculiar circumstances rendered it advisable for him to be.
Complaints had been poured into the ear of King Charles, in relation
to the Catholic partialities of the proprietary. It is said the latter
transmitted to the home government a list of the officers of the
province, which showed that the majority of the positions were in
the hands of the Protestants, and in reply to this communication he
received an order from Charles to "put all the offices into the hands
of
CITY OF BALTIMORE AND Baltimore County MARYLAND
BIOGRAPHICAL
 INTRODUCTORY glOGRAPHY alone can justly represent the
progress of local history' and portray with accuracy the relation of
men to events. It is the only means of perpetuating the lives and
deeds of those men to whom the advancement of a city or county
and the enlightenment of its people are due. The compilers of this
work have striven to honor, not only men of present prominence, but
also, as far as possible, those who in years gone by labored to
promote the welfare of their coraninnity. The following sketches have
been prepared from the standpoint of no man's prejudice, hut with
an impartial aim to render justice to progressive and public-spirited
citizens and to collect personal records that will be of value to
generations yet to come. To be forgotten has been the great dread
of mankind from remotest ages. All will be forgotten soon enough, in
spite of their best works and the most earnest efforts of their friends
to presen-e the memory of their lives. The means employed to
prevent oblivion and to perpetuate their memory have been in
proportion to the amount of intelligence they po.sse.ssed. The
pyramids of Egypt were built to perpetuate the names and deeds of
their great rulers. The exhumations made by the archaeologists of
Egypt from buried Memphis indicate a desire of tho.se people to
perpetuate the memorj- of their achievements. The erection of the
great obelisks was for the .same purpo.se. Coming down to a later
period, we find the Greeks and Romans erecting mausoleums and
monuments, and carving out statues to chronicle their great
achievements and carry them down the ages. It is al.so evident that
the Mound-builders, in piling up their great mounds of earth, had
but this idea — to leave something to show that they had lived. All
the.se works, though many of them costly in the extreme, give but a
faint idea of the lives and character of those whose memory they
were intended to perpetuate, and scarcely anything of the mas.ses
of the people that then lived. The great pyramids and some of the
obeli.sks remain objects only of curiosity: the raau.soleums,
monuments and statues are crumbling into dust. It was left to
modern ages to establish an intelligent, undecaying, immutable
method of perpetuating a full history — immutable in that it is
Welcome to our website – the ideal destination for book lovers and
knowledge seekers. With a mission to inspire endlessly, we offer a
vast collection of books, ranging from classic literary works to
specialized publications, self-development books, and children's
literature. Each book is a new journey of discovery, expanding
knowledge and enriching the soul of the reade

Our website is not just a platform for buying books, but a bridge
connecting readers to the timeless values of culture and wisdom. With
an elegant, user-friendly interface and an intelligent search system,
we are committed to providing a quick and convenient shopping
experience. Additionally, our special promotions and home delivery
services ensure that you save time and fully enjoy the joy of reading.

Let us accompany you on the journey of exploring knowledge and

personal growth!

ebookname.com