-
Notifications
You must be signed in to change notification settings - Fork 0
/
nextChpt8.htm
169 lines (165 loc) · 11.3 KB
/
nextChpt8.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Next Steps</title>
<link href="_css/styles.css" rel="stylesheet" type="text/css">
<script src="_scriptsChpt8/tabs.js"></script>
</head>
<body>
<header role="banner">
<h1>HTML Essential Training</h1>
<h2>Next Steps</h2>
<nav role="navigation">
<ul>
<li><a href="intro.htm" title="Introduction to HTML">Introduction to HTML</a></li>
<li><a href="syntax.htm" title="HTML syntax">HTML syntax</a></li>
<li><a href="structure.htm" title="Structuring pages">Structuring pages</a></li>
<li><a href="links.htm" title="Creating links">Creating links</a></li>
<li><a href="reference.htm" title="HTML Reference">HTML reference</a></li>
<li><a href="next.htm" title="Next steps">Next steps</a></li>
</ul>
</nav>
</header>
<main role="main">
<article role="article">
<header>
<p>Once you master the basics of authoring HTML, you’ll need focus on what your next steps will be. If you’re an aspiring web designer, you’ll need to dive deeper into HTML, CSS, and JavaScript. If you’re maintaining
a corporate or personal site through a CMS, you’ll need to focus on how the CMS works, and the most efficient ways to edit and maintain content. On this page I’ll give you some basic advice on how to approach learning web
design and point you towards additional resources that can help you along the way.</p>
</header>
<aside role="complementary" class="languages">
<h3>Core Languages</h3>
<div id="tabContainer">
<div id="tabs">
<ul>
<li id="tab1"><a href="#tabPanel1">HTML</a></li>
<li id="tab2"><a href="#tabPanel2">CSS</a></li>
<li id="tab3"><a href="#tabPanel3">Javascript</a></li>
</ul>
</div>
<div id="containers">
<div id="tabPanel1">
<h4>HTML</h4>
<p><strong>Hypertext Markup Language.</strong> Controls the structure and semantics of web pages. Tags are used to mark up elements and denote content type. Although HTML does contain some presentational elements, it consists primarily
of logical tags that identify content or provide information on content hierarchy.</p>
<p>HTML also allows for images and media such as video to be embedded as content on pages. This is usually referred to as replaced content, as the HTML tag will refer the user agent to fetch an external resource.</p>
</div>
<div id="tabPanel2">
<h4>CSS</h4>
<p><strong>Cascading Style Sheets.</strong> Controls the visual presentation of page elements. It is responsible for page layout, color, typography, and element dimensions. Recent additions to CSS have included transforms and
animations, which have greatly expanded the capabilities of CSS and the effects that can be controlled through it.</p>
<p>CSS is a presentational language, meaning that it's syntax references page elements, and then assigns values to the visual properties of those elements. Although the basic syntax is easy to learn there are a considerable amount of
properties and values to learn, as well as which element types they can apply to.</p>
<p>The "cascading" nature that CSS derives its name from indicates how styles are applied by user agents. Since styles can be applied from multiple sources, there are rules that control when styles are applied and how to resolve
conflict. Understanding the cascade is a critical part of controlling site-wide styles efficiently.</p>
</div>
<div id="tabPanel3">
<h4>Javascript</h4>
<p><strong>JavaScript.</strong> Controls the behavior of page elements and is used to create interactive widgets, facilitate user interaction, control the browser, or a host of other functions. Javascript is a programming language, and
its syntax is arguably the most difficult to learn of the three core languages. Page elements are accessed through the <strong>DOM</strong> (Document Object Model) and then manipulated through <strong>events</strong> and <strong>functions</strong>.</p>
<p>Because the code is executed within the browser and not on a web server, Javascript is often referred to as a "client-side" scripting language. This functionality makes Javascript faster than many other scripting choices, and
capable of providing instant feedback or results to the user.</p>
<p>Over the years many Javascript frameworks and libraries have been developed to extend the capabilities of Javascript and make it faster to write. The success of libraries like jQuery have led to an explosion of Javascript
development and have solidified it as the <i>de facto</i> scripting language for the web.</p>
</div>
</div>
</div>
</aside>
<section>
<h3>Learning Web Design</h3>
<p>“Web design” is a pretty open-ended term. Often people who are new to web design feel overwhelmed at everything there is to learn. That’s understandable, but just remember that it’s like any other discipline; with
proper dedication and focus you’ll progress quickly. Here’s my favorite advice to new web designers on learning web design:</p>
<p><strong>Learn how the web works.</strong><br> I’m always amazed at how many web designers focus on learning “just what they need to know” and ignore how the web actually works. Without understanding how web servers,
protocols, browsers, and other related web technology works, you’ll never really understand the context behind why you do the things you do, and what makes one practice better than another.</p>
<p><strong>Determine an area of focus, and start there.</strong><br> There are a lot of areas of web design that you could specialize in, so I’d recommend learning as much about them as you can, to determine which areas interest you.
Then, spend as much time learning about your specific area of focus as possible. Once you achieve a level of proficiency, begin to branch out into other areas as well. </p>
<p><strong>Never stop learning</strong><br> The web is constantly evolving. Even if you become the absolute best there is in a specific field, chances are new techniques and approaches will come along within the year that will make your
current skill set less desirable. Understand that being a good web designer means embracing the changing nature of the web.</p>
<p><strong>Break things!</strong><br> There is no better teacher than experience. Build and experiment constantly. Ask yourself, “<i>what would happen if I?...</i>” or “<i>wonder if I could build?...</i>” and then go
out and build it. If you’re like me, you’ll fail a good bit of the time, but the process of trying things and breaking them will make you that much better. <em>Always challenge yourself</em>.</p>
</section>
<section>
<h3>Web Design Resources</h3>
<ul>
<li><a href="http://www.lynda.com" title="lynda.com online training library"><b>lynda.com online training library</b></a>
<ul>
<li><a href="http://www.lynda.com/HTML-training-tutorials/224-0.html" title="lynda.com html related titles">HTML related titles</a></li>
<li><a href="http://www.lynda.com/Web-Design-training-tutorials/1376-0.html" title="lynda.com web design related titles">Web Design related titles</a></li>
</ul>
</li>
<li><b>HTML specifications</b>
<ul>
<li>Although their format can be a bit hard to read initially, once you’re familiar with them there is no better resource for learning HTML and staying current with it than reading the actual W3C specifications.</li>
<li><a href="http://www.w3.org/TR/html401" title="html 4 specification">HTML 4.0</a></li>
<li><a href="http://www.w3.org/TR/xhtml1" title="xhtml 1 specification">XHTML 1.0</a></li>
<li><a href="http://developers.whatwg.org" title="html 5, WHATWG edition">WHATWG HTML5</a></li>
<li><a href="http://www.w3.org/TR/html5">W3C HTML5</a></li>
</ul>
</li>
<li><a href="http://validator.w3.org" title="W3C markup validator"><b>W3C Markup Validation Service</b></a>
<ul>
<li>Great for testing code and making sure you’re writing valid HTML syntax.</li>
</ul>
</li>
<li><a href="https://developer.mozilla.org/en-US" title="Mozilla developer network"><b>Mozilla Developer Network</b></a>
<ul>
<li>One of the best online resources for web designers and developers. Great collection of articles, tutorials, and references.</li>
</ul>
</li>
<li><a href="http://www.html5rocks.com" title="HTML 5 rocks"><b>HTML5 Rocks</b></a>
<ul>
<li>Once you’ve got the basics down, check out sites like HTML5 Rocks. This site feature articles, tutorials, and other resources that help you keep up with the evolving web. </li>
</ul>
</li>
</ul>
</section>
</article>
</main>
<footer role="contentinfo">
<p>© <a href="http://www.lynda.com" title="lynda.com" target="_blank">lynda.com</a> | follow me and lynda.com on Twitter! <a href="https://twitter.com/jameswillweb" title="Follow me on Twitter">@jameswillweb</a> <a href="https://twitter.com/lynda"
title="Follow lynda.com on Twitter">@lynda</a></p>
</footer>
<script type="text/javascript">
//tabbed panels
// declare globals to hold all the links and all the panel elements
var tabLinks;
var tabPanels;
window.onload = function() {
// when the page loads, grab the li elements
tabLinks = document.getElementById("tabs").getElementsByTagName("li");
// Now get all the tab panel container divs
tabPanels = document.getElementById("containers").getElementsByTagName("div");
// activate the _first_ one
displayPanel(tabLinks[0]);
// attach event listener to links using onclick and onfocus, fire the displayPanel function, return false to disable the link
for (var i = 0; i < tabLinks.length; i++) {
tabLinks[i].onclick = function() {
displayPanel(this);
return false;
}
tabLinks[i].onfocus = function() {
displayPanel(this);
return false;
}
}
}
function displayPanel(tabToActivate) {
// go through all the <li> elements
for (var i = 0; i < tabLinks.length; i++) {
if (tabLinks[i] == tabToActivate) {
// if it's the one to activate, change its class
tabLinks[i].classList.add("active");
// and display the corresponding panel
tabPanels[i].style.display = "block";
} else {
// remove the active class on the link
tabLinks[i].classList.remove("active");
// hide the panel
tabPanels[i].style.display = "none";
}
}
}
</script>
</body>
</html>