From 6cff511f1e5caa43f03910dbcdf27c44e7d272fa Mon Sep 17 00:00:00 2001 From: ObjectiveTruth Date: Thu, 27 Jul 2017 21:43:09 -0400 Subject: [PATCH 1/7] Added Google Analytics --- assets/custom/2.2.0/js/custom.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/assets/custom/2.2.0/js/custom.js b/assets/custom/2.2.0/js/custom.js index b840407..5b0da3b 100755 --- a/assets/custom/2.2.0/js/custom.js +++ b/assets/custom/2.2.0/js/custom.js @@ -482,14 +482,12 @@ })(jQuery); -/** Google Analytics **/ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) -})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); +})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); -// set yor id -ga('create', 'UA-40696437-5', 'auto'); +ga('create', 'UA-50588233-4', 'auto'); ga('send', 'pageview'); @@ -497,4 +495,3 @@ ga('send', 'pageview'); - From 392baa132726da35cc5de8db25a6eea4e80428cf Mon Sep 17 00:00:00 2001 From: ObjectiveTruth Date: Thu, 27 Jul 2017 22:14:22 -0400 Subject: [PATCH 2/7] Added description and metas --- index.html | 6 +++--- portfolio-4-col-caption.html | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 4b8c5d6..0088053 100755 --- a/index.html +++ b/index.html @@ -11,9 +11,9 @@ Objectivetruth.ca | Miguel Mendez - - - + + + diff --git a/portfolio-4-col-caption.html b/portfolio-4-col-caption.html index 434992e..903f64e 100755 --- a/portfolio-4-col-caption.html +++ b/portfolio-4-col-caption.html @@ -11,9 +11,9 @@ Objectivetruth.ca | Miguel Mendez - - - + + + From 406e8eea76c8ab157d3e5aca393e1fcc59cc0ec5 Mon Sep 17 00:00:00 2001 From: ObjectiveTruth Date: Mon, 21 Aug 2017 08:07:57 -0400 Subject: [PATCH 3/7] Removed experienced keyword --- index.html | 2 +- portfolio-4-col-caption.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0088053..553d418 100755 --- a/index.html +++ b/index.html @@ -60,7 +60,7 @@

- Experienced + Sr. Software Architect IAM consultant diff --git a/portfolio-4-col-caption.html b/portfolio-4-col-caption.html index 903f64e..3a84659 100755 --- a/portfolio-4-col-caption.html +++ b/portfolio-4-col-caption.html @@ -58,7 +58,7 @@

- Experienced + Sr. Software Architect IAM consultant From 346eff69291755075eb2f97857b5198b1762da76 Mon Sep 17 00:00:00 2001 From: ObjectiveTruth Date: Sun, 21 Jan 2018 13:28:18 -0500 Subject: [PATCH 4/7] Added contact line --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 553d418..8d37c9d 100755 --- a/index.html +++ b/index.html @@ -130,7 +130,9 @@

My place on the web

-

+

+ I am a consultant who specializes in IAM, Devops, and Cloud Architectures. I would be glad to help on your next project. You can reach me via email or LinkedIn +

From 515fe76d0b21dce6f0aaacd5762bc83422a1a994 Mon Sep 17 00:00:00 2001 From: ObjectiveTruth Date: Thu, 30 Aug 2018 23:54:48 -0400 Subject: [PATCH 5/7] Added mariam files --- mariam/03_09/_css/styles.css | 114 +++++++++++++ mariam/03_09/_images/200px-W3C_Icon.png | Bin 0 -> 6339 bytes mariam/03_09/_images/tags.png | Bin 0 -> 10917 bytes mariam/03_09/intro.htm | 52 ++++++ mariam/03_09/lab_instructions.txt | 45 +++++ mariam/03_09/links.htm | 50 ++++++ mariam/03_09/next.htm | 46 +++++ mariam/03_09/reference.htm | 161 ++++++++++++++++++ mariam/03_09/structure.htm | 36 ++++ mariam/03_09/syntax.htm | 64 +++++++ mariam/03_09_original/_css/styles.css | 114 +++++++++++++ .../03_09_original/_images/200px-W3C_Icon.png | Bin 0 -> 6339 bytes mariam/03_09_original/_images/tags.png | Bin 0 -> 10917 bytes mariam/03_09_original/intro.htm | 52 ++++++ mariam/03_09_original/lab_instructions.txt | 45 +++++ mariam/03_09_original/links.htm | 50 ++++++ mariam/03_09_original/next.htm | 46 +++++ mariam/03_09_original/reference.htm | 161 ++++++++++++++++++ mariam/03_09_original/structure.htm | 36 ++++ mariam/03_09_original/syntax.htm | 64 +++++++ 20 files changed, 1136 insertions(+) create mode 100755 mariam/03_09/_css/styles.css create mode 100755 mariam/03_09/_images/200px-W3C_Icon.png create mode 100755 mariam/03_09/_images/tags.png create mode 100755 mariam/03_09/intro.htm create mode 100755 mariam/03_09/lab_instructions.txt create mode 100755 mariam/03_09/links.htm create mode 100755 mariam/03_09/next.htm create mode 100755 mariam/03_09/reference.htm create mode 100755 mariam/03_09/structure.htm create mode 100755 mariam/03_09/syntax.htm create mode 100755 mariam/03_09_original/_css/styles.css create mode 100755 mariam/03_09_original/_images/200px-W3C_Icon.png create mode 100755 mariam/03_09_original/_images/tags.png create mode 100755 mariam/03_09_original/intro.htm create mode 100755 mariam/03_09_original/lab_instructions.txt create mode 100755 mariam/03_09_original/links.htm create mode 100755 mariam/03_09_original/next.htm create mode 100755 mariam/03_09_original/reference.htm create mode 100755 mariam/03_09_original/structure.htm create mode 100755 mariam/03_09_original/syntax.htm diff --git a/mariam/03_09/_css/styles.css b/mariam/03_09/_css/styles.css new file mode 100755 index 0000000..32c2eea --- /dev/null +++ b/mariam/03_09/_css/styles.css @@ -0,0 +1,114 @@ +html, body { + background: #663399; /* Beccapurple */ + margin: 0; +} +h1, h2, h3, h4, h5, h6, p { + margin: 0; + padding: 0; +} +h1, h2, h3, h4, h5, h6 { + color: rgb(107, 107, 132); +} +body { + font-family: Verdana, Geneva, sans-serif; + font-size: 100%; + width: 80%; + margin-right: auto; + margin-left: auto; + padding: 2.5% 2.5% 0; + background: white; + line-height: 1.8; +} +h1 { + font: 1.6em Verdana, Geneva, sans-serif; + margin-bottom: .4em; + color: rgb(83, 104, 138); +} +h2 { + font: 3.2em Georgia, "Times New Roman", Times, serif; + margin-bottom: .2em; +} +h3 { + font-size: 1.2em; +} +p { + margin-bottom: 1em; +} +a { + color: rgb(184, 126, 84); +} +a:hover { + color: rgb(120, 97, 55); +} +pre { + font-size: 1.4em; + color: white; + padding: .5em 1em; + border-left: 1em solid #A68048; + background: #666; + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; + width: 80%; +} +pre.wrong { + border-left-color: red; +} +pre.correct { + border-left-color: green; +} +dt { + font-style: italic; + font-size:1.2em; +} +dd { + margin-bottom: 1.4em; +} +table { + margin-top: 1em; +} +caption { + margin: 0; + padding: 0; + margin-bottom: 1em; + text-align: left; +} +td, th { + padding: 10px; +} +.center { + text-align: center; +} +header h2 { + padding-bottom: .2em; + border-bottom: 1px solid gray; +} +aside { + padding: 1em; + background:rgb(83, 104, 138); + color: white; + margin-bottom: 1em; +} +aside h4 { + color: white; +} +footer { + border-top: 1px solid gray; + text-align: center; + font-size: .8em; + line-height: 4em; + margin-top: 1em; +} +blockquote { + font-style: italic; +} +.flowRight { + float: right; + margin-left: 10px; +} +.flowLeft { + float: left; + margin-right: 10px; +} diff --git a/mariam/03_09/_images/200px-W3C_Icon.png b/mariam/03_09/_images/200px-W3C_Icon.png new file mode 100755 index 0000000000000000000000000000000000000000..4abe8c2cca29ceabe21a29f6f914ed276f66ed2d GIT binary patch literal 6339 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 a2nm*{0+2GGvBy6MfSQuFV%1BFp#K3EyA(?R literal 0 HcmV?d00001 diff --git a/mariam/03_09/_images/tags.png b/mariam/03_09/_images/tags.png new file mode 100755 index 0000000000000000000000000000000000000000..e7165fdd26928f926b33408bdc637c8f6557ca92 GIT binary patch literal 10917 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 z z749G~mhlGJ>hM)fl-S|lDu|zm*)yS8&E4dUZ32WG+Rk5VHSSa&ycXo0j9P(7`?yil z#iS>BWU7^1f--ex|4EVJje;S1xjr~Mw z{n9D>G4k}zqN}!3O4UflRottyV(#U1Ql;N2jQ6Y6{ly^SBSd3MHX_P1d z`;;4ZY=xwS#Ie{15yR3NG2Zktxh|s1Z$ml?2JRT^7`C%1d&%VjB*yck0@J+d{!POUXbK8jy4W;N#yH zki;4D9=1AELw^fo6IKm%L~Ph}(G{XUFZ)s&HT1FiA+vcfsx|Zht^;fcA|8)vB*BGz z$*{JB z`koG9^%B@wlcsIUhMi+o_%y}iYO^wW#c~usZO_3N6(ivE^pr#{e*TQ^8XTa>eraW*#GBuVEUO;D&wQ!{xF$ z>zf0j1cC6i3jd9b$xW~>GKG-m0{m1zCJcsw^KLJH$)odTCs z#VxGMg6#T%OOtT3NH&ee%zLi1eM^q+=BvNU`cI|wtJvX&6k8a|PSuyvdbQU3Rj!ED zP|J-=s(EAX&27|1Y8Mrrd`tAaku1itIU?sWCh+p9?JCXN&6{60VstP`Etws6RbuiP zwTWY0;VM&56a8`;B;x;hPD#kiO+i`)Xh_xE!BAiLv_Ii%^mBu0H13d`zUDE92` zxl*B@O$-LLnyB=_{p_^&o<2TJbjJmpH0zYbNUuU>ED{jVQtlK$O}pT7xAM;>1`>ul^=pM9kG>$*N8@R*qfD=w$U@omC-DHm7!oEK%8<{7`Fq1Qf7c%D&vYV4ae zBGT<9m`X;TU2mLFQ19`_s(`f<*>z0?H!{E+-P4-tTW_@lqiwl`DT;Ifd3=%;*saJV zV_ur`)rD*GYEXWgWxy=0GFStX<{Io5vTh(1ws1UB+j{ zL6fK0g)v^{PAEdaU(vnqYGu`xv6?VH(;O7&Ipk_N(rd1QLs!!!cuc!t@92!R(pY6# zLC#*Jm*4vFeJh8UKb9T_yFsg0Mn*i(UEn0jVCC*BdoijyHOuah$Mchs5K*sjdni8o z;#zV6nDY5v=R5@(2h)_WRv=u-{^AF_@j-=_H#Un1e(OC#j|H_v@^%|vl%0%VHQVZL z@x-5Jp=^D35HLZj<(<$1*152d_@}^ei|XHM3Qnd{=ITcjjM0; z4zlv01v&hyf|L92a5+9a-2bg#zwfBorK>r5AP$%42zQ?Ta~Gnx9zOEHEJf@NDVnx2 zSM7tOg}r%6LH_t}hk7rWWD#>VXJD%RhjGKr(+!YrOBn`PKYQer8cl_-K zS1T~TN~Z(@?=~GxMyZ)Etps^mVJ^3Sk|YpTLWQSNe-I`?vHD3g15r*&zt*Kd4_-2u zG1~y06F#T|jScS|0@or2Ut;(h+RHpa>`l?A+gSU!!ocm2YA(X z@}kVdyFr3eYfP6E6{azwHXS7v&Kr7LsArcA-+Sqj!&kItWVLb3ccka zgjUWuE!)dg)H77Q859q>4f?o&9Os^Clp0`sb;pof<6>7f`~nj)H#6_eCY(EMQE(U6 z8{>-5j1JLAAi9B1)MR>yM%%R4gZ7?%?o@r)k{9eF5=0*RjUrX(kaem%)D??M$cuLl zG3Lm(07Y80M7z9hL5MNF)tA?{y25WE072P|)Bv!AR~b|>G`AF$?U=h* zJi&Q;`df7RXLtDrg&B)t{o)%q3;y|I9}UMTBQS5=HTJo)j5nFcEyzf6q)tBlGhkF= z_Ou4go3L9Be8Di*ZK7+EJB??t&z;J2nQm3^Aie4p#;OB4l(@OD4Hk^)4j_^UJMl^c zmdr1mnCjZ{@icZJV9>2Fclh9xBY>Fc$_{{P4&5!338Y@{VGVIWex~wnmP2CI~m>uUd1n1-dkLHPJH2 zX~a585Z{dDMGFfjb4v@sWY*qKsqa7oaAcg48AA~nV@X;n}T~_M1-t3m#TRJ?|Lx$O2qUL2`*6vLO{Xzl4 zNGpmS6Ye*(FJ;`%X;~Uq7wR=Q^p;li|E?JOA6?GBx-0*SV(5QSkcA;a68+vEwD)i< YqDgu1E_L&;zEe1P>5qUKNz?HE1=_n7NB{r; literal 0 HcmV?d00001 diff --git a/mariam/03_09/intro.htm b/mariam/03_09/intro.htm new file mode 100755 index 0000000..cd91b60 --- /dev/null +++ b/mariam/03_09/intro.htm @@ -0,0 +1,52 @@ + + + + +Introduction to HTML + + + +

HTML Essential Training

+

Introduction to HTML

+ +HTMLHTML, or

Hypertext Markup Language, is the language used to describe the structure of content on the web. As with other markup languages, it uses tags to identify page elements and describe the page’s semantic structure. An easy way to visualize this is to consider the various types of documents you see on a day-to-day basis, like magazine and newspaper articles or documents created in a program like Microsoft Word. The formatting of those documents ensures that the information is presented clearly, with a distinct hierarchy. This allows readers to quickly scan the page and determine which information is important and how the content relates to each other. HTML allows us to do that for web pages by first establishing the overall document structure, and then formatting elements like headings and paragraphs.

+ +

History

+ +

HTML can trace its roots back to 1989 at CERN, the European Laboratory for Particle Physics. There, Tim Berners-Lee came up with the idea of having scientists from around the world collaborate on research. His idea was rather than simply making documents available on a server as many people were doing at the time, the documents themselves should be able to link to one another, in a way that would enhance collaboration and make information easier to find and more accessible. From this idea Tim created HTML (based off SGML, an earlier markup language) to format pages and HTTP (or Hypertext Transfer Protocol) to transfer them from one computer to another. Although the world didn’t quite realize it yet, the World Wide Web was born.

+ +

As the popularity of the web increased in the early 90s, HTML underwent a series of rapid changes. Browser manufacturers like Netscape and Microsoft started to develop their own proprietary tags, and development bodies like the IETF (the Internet Engineering Task Force) and the W3C (the World Wide Web Consortium) were finding it difficult to gain traction with the standardization process of HTML. By 1995, the W3C created an editorial review board for HTML that included members of the W3C as well as representatives from browser developers and other organizations. This collaborative board had a major impact in stabilizing the HTML standard and reducing the uneven implementations that had plagued earlier browsers.

+ +

This resulted in the HTML 4.0 specification being released in 1998. It was the most stable version of HTML up to that point, and formalized many of the improvements made to HTML over the years. It’s still the most widely used version of HTML and remains the baseline for authors and implementers alike.

+ +

Around the time that HTML 4.0 was published, a movement began to evolve HTML towards a more flexible style of markup language. Although authors had tried to anticipate the tags necessary to markup documents, the spread of the World Wide Web and the diversity of user agents made keeping up with requirements difficult. In the eyes of many, migrating to a markup language like XML, which allows authors to create their own tags to represent content, would alleviate those concerns and allow HTML to evolve organically. XML also contains stricter formatting rules than HTML, and a sizable number of authors and developers found HTML’s lax parsing rules problematic. This effort resulted in the publishing of the XHTML 1.0 specification in 2000. Although it was not a dramatic departure from HTML 4.0, it did introduce new syntax rules to conform to XML requirements and eliminated the HTML elements that were seen to be dictating the presentation of content rather than the structure of it.

+ +W3C logoShortly after the 1.0 specification was published, work began on XHTML 2.0, which was to move HTML further towards XML. XHTML 2.0 was a dramatic departure from previous versions of HTML and was never able to gain any traction among browser developers. The specification languished for years in the W3C before its charter was revoked in 2009, essentially ending development.

+ +

While the W3C was taking HTML down the XHTML path, a group of authors, developers, and organizations became frustrated with the lack of progress on updating HTML. This group decided to evolve HTML independently of the W3C and formed the Web Hypertext Application Technology Working Group (or WHATWG) in 2004. They began work on the Web Applications 1.0 standard, which extended HTML 4.0, adding clear parsing rules for user agents and creating APIs to make developing web applications easier. The W3C, realizing that XHTML 2.0 faced significant hurdles in adoption, began working with the WHATWG and began to jointly develop the new standard with them in 2008. Currently the W3C works on publishing a stable version of the specification, while the WHATWG continues to work on what they call a “living standard” of the specification. As a living standard, they’ve removed the version number and simply refer to it as “HTML.”

+ +

HTML timeline

+ +
    +

  1. 1991: Tim Berners-Lee publishes “HTML Tags” which describes the initial 18 elements of HTML
    2. +
  2. 1992: NCSA develops the Mosaic browser, which will eventually evolve into Netscape
    3. +
  3. 1994: The Internet Engineering Task Force (IETF) creates an HTML working group to develop HTML specifications. Later that year the W3C was created to foster an open standards environment
    4. +
  4. 1995: HTML 2.0 specification is published
    5. +
  5. 1995: Microsoft releases Internet Explorer to compete with Netscape
    6. +
  6. 1997: HTML 3.2 specification is published
    7. +
  7. 1997: HTML 4.0 specification is published
    8. +
  8. 2000: XHTML 1.0 is published as a W3C recommendation
    9. +
  9. 2004: The WHATWG forms to continue work on HTML
    10. +
  10. 2006: W3C announces it will work with the WHATWG on HTML5
    11. +
  11. 2009: XHTML Working Group charter expires
    12. +
  12. 2012: W3C and WHATWG announce they will develop the HTML5 standard separately
    13. +

+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09/lab_instructions.txt b/mariam/03_09/lab_instructions.txt new file mode 100755 index 0000000..7327097 --- /dev/null +++ b/mariam/03_09/lab_instructions.txt @@ -0,0 +1,45 @@ +Challenge instructions for Chapter 03: Formatting Page Content + +Welcome to your first challenge! In this course’s challenges, you’ll work on completing the HTML Essential Training reference site. You won’t be building the site from scratch, rather you’ll be completing various portions of the site in varying degrees of completion. The goal is to reinforce and put into practice what you’ve learned in this chapter. + +For this challenge you’ll be planning and implementing a formatting strategy for the site. In the steps below I’ll list the tasks you need to perform, as well as the relevant files for each task. + +1. Determine a heading strategy. + a. Applies to: All pages + b. Explore each of the pages (intro.htm, links.htm, next.htm, reference.htm, structure.htm and syntax.htm) and carefully read through the text. + c. Determine which content should be represented as headings, and then which level of headings you should use for each page. Focus on being consistent in how you assign headings for each page. + d. Go through each of the pages, and format headings based on your strategy. + +2. Format paragraphs + a. Applies to: intro.htm + b. Determine which content should be represented by paragraphs and then format them appropriately. + +3. Controlling line breaks + a. Applies to: next.htm + b. In the section under “learning web design” there are four recommendations. Each recommendation has an initial sentence followed by descriptive text. Using a line break, format these paragraphs so their initial sentence appears on its own line. + +4. Determining emphasis + a. Applies to: next.htm + b. In the file next.htm examine the four pieces of advice in the Learning Web Design section. Determine how to best emphasize the first line in each paragraph. Think about ways that you could isolate that line or emphasize it in a way that denotes its importance to the rest of the paragraph. + c. In the last advice paragraph (“break things”), display the quotes in italics. In the same paragraph, emphasize the last line “Always challenge yourself” so that it’s importance is indicated. + d. In the list of resources below the advice section, make sure all top-level list items appear in bold. + +5. Displaying special characters + a. Applies to: reference.htm + b. Scroll down and find the table that displays common named character entities. + c. Preview the page in a browser, and using the table as a reference, add the appropriate entity into the first table cell to provide an example of that character. + d. In the definition for Elements, wrap the word "tags" in quotes using a left and right quote special character. + +6. Inserting Images + a. Applies to: Intro.htm + b. Examine the existing image at the top of the page. Note the class “flowRight” which is used by CSS to control styling. You’ll learn more about this in the chapter on CSS. + c. Scroll down until you locate the paragraph “Shortly After the 1.0 specification…” At the beginning of that paragraph insert an image that: + i. points to the 200px-W3C_icon.png in the _images directory + ii. uses the alt text “W3C logo” + iii. passes the value of 200 for width, and 136 for height + iv. applies a class of “flowLeft” + +When you're finished, open up the same files from the "finished_files" directory and compare your results with mine. Do they match? Were there times when you disagreed with the strategy I used for headers, creating lists, or emphasizing text? Often these decisions are judgment calls, and don't necessarily have a "right" answer. What's important is that you have a sound reason for making the decision you did that's based on valid, semantic HTML. For more practice, go through the files and compare your formatting to the existing formatting. Is it consistent? Is the formatting what you expect, or would you make changes? + + + diff --git a/mariam/03_09/links.htm b/mariam/03_09/links.htm new file mode 100755 index 0000000..5ed08ef --- /dev/null +++ b/mariam/03_09/links.htm @@ -0,0 +1,50 @@ + + + + +Creating Links + + + +

HTML Essential Training Creating Links

+ +

Perhaps the most important aspect of HTML is the ability to link from one document to another. This is the basic concept underlying the web and without this functionality the World Wide Web would not exist.

+

Link syntax

+

Creating links is relatively straightforward, and the syntax provides a lot of flexibility in where and how links are applied. To create a link, you’ll use the anchor element (<a>) to wrap the content you wish to convert to a link.  Attributes inside the anchor tag tell the browser where the page is linking to, or point to an external resource that the browser should download.
+ Take the following link example:

+
<a href=”syntax.htm” title=”learn more about syntax”>HTML syntax</a>
+

Here the text “HTML syntax” would now appear as a clickable link. The href attribute tells the browser how to resolve the link; that is where the user should be directed when the link is clicked. The optional title attribute provides a description of the link and is helpful in making the link more accessible.

+

Link types

+

There are three basic types of link: absolute, site-root relative, and document relative. Each of these types refers to the value of the href attribute, which directs how the browser should resolve a link once the link has been clicked.

+

Absolute links

+

These links contain the entire URL necessary to resolve a link, including the protocol. This is usually done for external links, which are links to pages outside of the current site. Here’s an example of an absolute link:

+
<a href=”http://www.lynda.com” title=”You can learn it at lynda.com!”>lynda.com</a>
+

Document relative links

+

These links are commonly used to navigate internally within a site. For example, if you were on the home page of your site, and wanted to navigate to the contact page, you simply provide the path from the home page to the contact page for the href value. Doing this requires you to understand the directory structure of your site, and when you need to navigate into, or out of, folders. Take the following example:

+
<a href=”contact.htm” title=”our contact page”>Contact us</a>
+

This link assumes that the contact page and the current page are in the same directory. If the contact page were located in a directory below the current page, the link would look like this:

+
<a href=”resources/contact.htm” title=”our contact page”>Contact us</a>
+

This assumes the contact page is in a directory titled “resources” and is one level below the current page. To move out of a directory, you precede the page with the “../” characters. In this case of our contact link it would look like this:

+
<a href=”../contact.htm” title=”our contact page”>Contact us</a>
+

This link would move up from the current directory and find the contact.htm page in the parent directory. You can use as many of these “../” as you need to move up and properly resolve the link.

+

Site-Root Relative Links

+

These are similar to document relative links, but start at the root folder for the site and then move down through directories to the desired page. Unlike document relative links, which depend on the current location of the page to properly resolve links, site-root relative links are written the same no matter the current location within your site. All links are preceded by a forward slash (/) that refers to the root directory. Here’s an example:

+
<a href=”/contact.htm” title=”our contact page”>Contact us</a>
+

In this example, the link is resolved by going directly into the site’s root folder and finding the contact page. If the contact page were located deeper within the site, the link would look like this:

+
<a href=”/resources/contact.htm” title=”our contact page”>Contact us</a>
+

Fragment identifiers

+

Occasionally you’ll want a link to refer to a specific location within a page. This can be done using a special kind of link called a fragment identifier. These links point to elements with a specific ID attribute. Let’s say, for example, you have a long list of FAQs on a page organized by categories and you had a heading at the top of each category. If you assigned each heading an ID attribute, you could use those IDs to create a links that jump to specific categories. For example, you could format the Camping FAQs heading like this:

+
<h2 id=”camp”>Camping</h2>
+

Elsewhere on the page you could link to this section by creating the following link:

+
<a href=”#camp”>Learn more about camping</a>
+

Note the hash symbol (#) prior to the ID value. This tells the browser to look for an element with the ID value that follows.You can link to fragment identifiers on external pages as well. Simply append the fragment identifier to the URL and the link will jump to not only to that page, but that specific section as well.

+
<a href=”faq.htm#camp”>Read our FAQ on camping.</a>
+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09/next.htm b/mariam/03_09/next.htm new file mode 100755 index 0000000..a9122ae --- /dev/null +++ b/mariam/03_09/next.htm @@ -0,0 +1,46 @@ + + + + +Next Steps + + + +

HTML Essential Training Next Steps

+ +

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.

+

Learning Web Design

+

“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:

+


Learn how the web works.

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

+


Determine an area of focus, and start there.

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

+


Never stop learning

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

+


Break things!

+There is no better teacher than experience. Build and experiment constantly. Ask yourself, “what would happen if I?...” or “wonder if I could build?...” 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. Always challenge yourself.

+

Web Design Resources

+

lynda.com online training library

+

HTML related titles

+

Web Design related titles

+

HTML specifications

+

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.

+

HTML 4.0

+

XHTML 1.0

+

WHATWG HTML5

+

W3C HTML5

+

W3C Markup Validation Service

+

Great for testing code and making sure you’re writing valid HTML syntax.

+

Mozilla Developer Network

+

One of the best online resources for web designers and developers. Great collection of articles, tutorials, and references.

+

HTML5 Rocks

+

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.

+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09/reference.htm b/mariam/03_09/reference.htm new file mode 100755 index 0000000..a7558fb --- /dev/null +++ b/mariam/03_09/reference.htm @@ -0,0 +1,161 @@ + + + + +HTML Reference + + + +

HTML Essential Training

+

HTML Reference

+ +

On this page you’ll find a quick reference to common HTML terms and a table of frequently used named character entities.

+

HTML Terms

+
+

Attribute

+
An HTML element property that provides additional information or functionality for an element. Attributes appear as a name/value pair with the value contained in quotation marks.
+

Block-Level Element

+
HTML tags that create blocks of content within the document such as headings and paragraphs. Block-level elements typically stack one on top of each other based on the order they appear in the code.
+

Child Element

+
Any HTML element that is contained inside another HTML element. Child element tags must close before their parent element tags.
+

Closing Tag

+
Appears after an element’s content and indicates the end of an element. Is identical to an element’s opening tag with the addition of a forward slash (/) prior to the tag’s character.
+

Comment

+
Reference information added to the code. May include an overview of more complex code, a reminder for future authors, or communications within a team.
+

CMS

+
CMS is short for Content Management System, and refers to any system designed to allow users to create and maintain content. For the web, it primarily refers to software designed to manage web sites and their content. Examples include Joomla! and WordPress.
+

CSS

+
Cascading Style Sheets (CSS)is a presentation language used to control the presentation and layout of web pages.
+

Doctype

+
Short for Document Type Declaration. Appears at the top of all HTML documents to trigger standards mode and identifies the version of HTML used by the document.
+

DOM

+
The DOM, or Document Object Model, is a representation of documents like HTML. The DOM can be thought of as an outline where tags are represented by “nodes.” Scripting languages like JavaScript reference the DOM when accessing or modifying page content.
+

Elements

+
HTML elements consist of an HTML tag, used to identify the content, and the content itself. Is often used interchangeably with the term “tags” although technically tags only refer to the tag itself.
+

FTP

+
FTP stands for File Transfer Protocol. It’s a common protocol used for transferring large files from one server to another.
+

HTTP

+
HTTP, or Hypertext Transfer Protocol, controls the formatting and transmission of HTML pages across web servers.
+

Inline-Level Elements

+
Elements that appear within the normal flow of text. Unlike block-level elements, inline-level elements do not start new lines within the normal document flow.
+

JavaScript

+
Scripting language developed by Netscape and used to control much of the functionality and behavior on the web.
+

Metadata

+
Additional information about the document or document content, typically stored in meta tags.
+

MIME Type

+
Short for Multipurpose Internet Mail Extension, MIME types are used to tell user agents what type of program a file or extension is. Without a proper MIME type, user agents can have trouble properly running applications or processing files.
+

Parent Element

+
An HTML element that contains another element. It is possible for an element to be a child of one element and the parent of another.
+

Replaced Element

+
Any HTML element where the contents of the element are replaced by something else. Examples would be images, video, or other plug-in content.
+

Tag

+
Markup characters that indicate what type of content appear on the page. Most tags consist of both an opening and closing tag.
+

URL

+
URL stands for Uniform Resource Locator. It serves as the address of a document or other resource on the web.
+

W3C

+
The W3C, or World Wide Web Consortium, is the standards body responsible for authoring the HTML specification.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Common Named Character Entities
+
Character Description Entity
? double quotation mark&quot;
&ampersand&amp;
⟨left-angle bracket&lang;
⟩right-angle bracket&rang;
<less than symbol&lt;
>greater than symbol&gt;
 non-breaking white space&nbsp;
'apostrophe&apos;
“left double quote&ldquo;
”right double quote&rdquo;
«left-pointing double angle quotation mark&laquo;
®registered sign&reg;
©copyright symbol&copy;
™trademark symbol&trade;
⁄fraction slash&frasl;
–en dash&ndash;
—em dash&mdash;
+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09/structure.htm b/mariam/03_09/structure.htm new file mode 100755 index 0000000..0f0e932 --- /dev/null +++ b/mariam/03_09/structure.htm @@ -0,0 +1,36 @@ + + + + +Introduction to HTML + + + +

HTML Essential Training

+

Structuring Pages

+ +

Conveying meaning through structure

+

Creating properly structured pages is the foundation of any good website. A solid semantic structure allows you to convey meaning and properly represent content types through nothing more than the page's markup. This, in turn, makes your content more accessible, easier to index and search, and makes it easier to repurpose. Remember that there are a lot of different devices, robots, and other user agents that will be reading your code. Without a consistent, semantic structure your site will be less effective.

+

Sectioning elements

+

One way to add meaning to your content is to organize them into sections that convey meaning and structure. For example it's pretty standard to contain introductory information within a section, page navigation within its own area, the page's main content in its own region, and related information within a sidebar. HTML contains numerous elements that are designed to assist in the logical structuring and semantics of page content.

+

In previous versions of HTML creating new sections of content was done almost exclusively through the use of heading tags, with divs being used to group areas of content together. Class or ID attributes would allow designers to attach more semantic meaning to the groups, although this meant little to most user agents. In HTML5 new sectioning and semantic elements were introduced to help represent commonly used sections and create more consistent page structures. Tags like the aside, article, footer, header, main, nav, and section allow authors to identify common page regions and convey more semantic meaning.

+

Although some of these elements are very specific, in many cases which element you'll use and how you'll structure them is very much a judgment call. Make sure, however, that your finished structure represents the desired document outline.

+

Document outlines

+

One of the fundamental concepts of HTML is that its documents can be represented by a document outline that summarizes the content of the page. Imagine a page being represented by a table of contents and you'll have a good idea of what one of these outlines might look like. These outlines assist in tasks such as quickly searching documents and making content easier to navigate for assistive devices.

+

Prior to HTML5, document outlines were generated entirely through the use of headings. An H1 at the top of the page would serve to identify the page content, and subsequent headings would create sections and subsections inside of it. This meant that having a strategy for when to use certain headings was critical for maintaining consistent document structure. In HTML5 a new outline algorithm was introduced that added the new sectioning elements to the heading elements and created a more sophisticated outlining model. Although not currently implemented by user agents it is still recommended that authors familiarize themselves with it so that they're using the new sectioning and semantic tags properly.

+

It is still considered to be a best practice to use heading tags to establish the document outline. Mozilla has a fantastic article on sections and outlines in HTML documents that I strongly recommend reading.

+

W3C Warning

+

At the time of the authoring of this course, the W3C had posted this warning regarding the HTML5 outline algorithm:

+
There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.
+

WAI-ARIA Roles

+

Carefully structuring an HTML page is the first step into ensuring that the content is accessible to all users. You should also use WAI-ARIA role attributes where appropriate to increase accessibility and improve semantics. WAI-ARIA is short for the Web Accessibility Initiative's Accessible Rich Internet Application specification. The roles attribute attempts to identify content and its capabilities by assigning it to a predefined role. This helps assistive devices understand what the content is, how it relates to other content, and how the content can be interacted with. The W3C has a fantastic resource on how WAI-ARIA works and how it should be used with HTML.

+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09/syntax.htm b/mariam/03_09/syntax.htm new file mode 100755 index 0000000..84ab827 --- /dev/null +++ b/mariam/03_09/syntax.htm @@ -0,0 +1,64 @@ + + + + +HTML Syntax + + + +

HTML Essential Training HTML Syntax

+ +

Because HTML is often the people’s first experience with coding, there can be a fair amount of apprehension about learning it. Thankfully, HTML syntax is relatively simple and easy to learn. Most people can learn the basics of HTML and begin coding it within the same day.

+A markup language +

HTML is a markup language. That means that content on the page is “marked up” by tags which identify the content inside of them. A paragraph, for example, can be identified by placing the “<p>” opening tag prior to the paragraphs content and the “</p>” closing tag at the end of a paragraph. The full paragraph would look like this:

+
<p>This is a paragraph.</p>
+

Tags consist of a left-angle bracket (<) followed by a character or characters that identify the tag (the “p” for paragraph) and a closing right-angle bracket (>). The closing tags for an element are exactly the same as an opening tag, except that a forward slash (/) will precede the tags characters.
+ Although most elements require an opening and a closing tag, the closing tag is optional for some elements and not required at all for others. While there are exceptions to the rule, for the most part any element that contains content inside the opening and closing tags also requires a closing tag.

+

Basic document structure

+

The core of all HTML documents revolves around three basic tags. First, an html tag (<html>) is required to identify the document as an HTML file. Directly inside the html tag, you’ll find the head element (<head>). The head of a document is where you’ll find the document’s metadata, the document title, and links to external resources such as style sheets and scripts. A good way to think about the document’s head is that it doesn’t contain any of the page’s visual content rather it contains information about the document and the resources that help make the page work. Directly after the document’s head, you’ll find its body (<body>). The body is where you’ll find all of the page’s actual content. Headings, paragraphs, images, lists, tables, and other content will be located here. At its most basic, an HTML file would look like this:

+

+<html>     
+     <head>
+     </head>
+     <body>
+     </body>
+</html>
+
+

DOCTYPES

+

If you’ve looked at HTML pages before, you’ve probably noticed a long, somewhat intimidating tag just before the opening HTML tag. This is a doctype declaration and it’s a very important but often misunderstood component of HTML pages. Essentially, it tells the user agent parsing your page which version of HTML (or XHTML) to expect, so that it knows which syntax rules to use when rendering your page. The doctype you use should be based on the version of HTML you’re using to author the page. While that all sounds good in theory, in reality most of the time a doctype is simply triggering “standards-mode” rather than “quirks mode” (based on older browsers non-standard way of rendering pages). For that reason alone, all HTML documents should be preceded by a doctype declaration. For more information on doctypes, and the history behind them, check out Mark Pilgrim’s excellent section on doctypes from his Dive Into HTML5 book. Here are some of the more common HTML doctypes:

+

HTML 4.0 transitional

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+

XHTML 1.0 Transitional

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+

HTML5

+
<!DOCTYPE HTML>
+
+

Element attributes

+

Some elements can be enhanced through the use of attributes. Attributes allow you to provide more information or additional functionality to the content. Attributes are added to the opening tag of an element and consist of two parts, the name and value. Although the syntax varies based on the version of HTML you’re using, it’s standard practice to put values within quotation marks.

+
<h1 class=”headline”>Article’s main headline</h1>
+

Replaced elements

+

Some HTML elements represent content that is replaced by an outside resource such as an image, form control, or a video file. These elements are referred to as replaced elements and usually have a predetermined width or height. In some cases the elements will have attributes that tell the browser where to find an external resource like an image or video.

+
<img src=“photo.jpg” alt=“my awesome photo”> 
+

Code structure

+

HTML documents create structure by nesting elements inside of one another. You might group a section of page content together by wrapping them within a <div> or <section> element, for example. When nesting one tag within another one, you must first close any child elements prior to closing any parent elements.
+ This syntax, for example, would be incorrect:

+
<p>You must close all nested tags <strong>first!</p></strong>
+

Rather, the correct syntax would be:

+
<p>You must close all nested tags <strong>first!</strong></p>
+

HTML also has specific rules about which elements can be nested within other elements. A paragraph (<p>) for example, can’t be nested inside a heading (<h1>).  For the most part, these rules are based around the type of content the tag represents. HTML 4 has two basic types of content: block and inline. Block-level elements typically occupy their own line within a document, usually stacking one on top of each other in the order they appear in your code. Inline-level elements can appear within the flow of block level elements. Elements like strong (<strong>), bold (<b>), emphasis (<em>), italic (<i>), and span (<span>) are always found inside block-level elements.
+ HTML5, on the other hand, expands the concept of content types to seven different categories of content, with some elements belonging to multiple categories. This replaces the concept of block-level and inline-level elements and adds some additional nesting syntax rules. For the most part, the rules around nesting elements make sense and are fairly easy to pick up. You should be prepared, however, for it to take some time before you fully understand all of the rules surrounding nesting elements. One way to making sure to your code is structured properly is to validate your code through a service like the W3C’s Markup Validation service.

+

Commenting code

+

Often it is helpful to leave notes to yourself or other developers within your code. Perhaps you want to remind yourself what a certain script does, or remind a co-worker how to properly structure specific content. To do this, you’ll use comments. Comments should appear on their own line, and typically appear directly before or after the code they refer to. Comments begin with a left-angle bracket, an exclamation point, and two hyphens (<!--) and end with two hyphens followed by a right-angle bracket (-->).

+Comment syntax: +
<!-- This is a comment -->
+

Using special characters

+

Certain characters are reserved in HTML, meaning that you shouldn’t use them outside of their specific purpose. The angle brackets, for example, are reserved for tags, and using them anywhere outside of a tag could cause parsing errors in browsers. However, you can still use these reserved characters and other special characters or symbols by using what is known as a named character entity. These special codes tell the user agent to replace the entity code with a specific character. These entities begin with an ampersand (&) followed by the entity name and end with a semicolon (;). To display an ampersand, for example, you would type &amp; in place of the actual ampersand. You can find named character entity lists within the HTML specifications, although the format for them can be a bit hard to read. You can also find a useful list of character entities on the HTML Reference page, and a more comprehensive list on Wikipedia.

+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09_original/_css/styles.css b/mariam/03_09_original/_css/styles.css new file mode 100755 index 0000000..32c2eea --- /dev/null +++ b/mariam/03_09_original/_css/styles.css @@ -0,0 +1,114 @@ +html, body { + background: #663399; /* Beccapurple */ + margin: 0; +} +h1, h2, h3, h4, h5, h6, p { + margin: 0; + padding: 0; +} +h1, h2, h3, h4, h5, h6 { + color: rgb(107, 107, 132); +} +body { + font-family: Verdana, Geneva, sans-serif; + font-size: 100%; + width: 80%; + margin-right: auto; + margin-left: auto; + padding: 2.5% 2.5% 0; + background: white; + line-height: 1.8; +} +h1 { + font: 1.6em Verdana, Geneva, sans-serif; + margin-bottom: .4em; + color: rgb(83, 104, 138); +} +h2 { + font: 3.2em Georgia, "Times New Roman", Times, serif; + margin-bottom: .2em; +} +h3 { + font-size: 1.2em; +} +p { + margin-bottom: 1em; +} +a { + color: rgb(184, 126, 84); +} +a:hover { + color: rgb(120, 97, 55); +} +pre { + font-size: 1.4em; + color: white; + padding: .5em 1em; + border-left: 1em solid #A68048; + background: #666; + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; + width: 80%; +} +pre.wrong { + border-left-color: red; +} +pre.correct { + border-left-color: green; +} +dt { + font-style: italic; + font-size:1.2em; +} +dd { + margin-bottom: 1.4em; +} +table { + margin-top: 1em; +} +caption { + margin: 0; + padding: 0; + margin-bottom: 1em; + text-align: left; +} +td, th { + padding: 10px; +} +.center { + text-align: center; +} +header h2 { + padding-bottom: .2em; + border-bottom: 1px solid gray; +} +aside { + padding: 1em; + background:rgb(83, 104, 138); + color: white; + margin-bottom: 1em; +} +aside h4 { + color: white; +} +footer { + border-top: 1px solid gray; + text-align: center; + font-size: .8em; + line-height: 4em; + margin-top: 1em; +} +blockquote { + font-style: italic; +} +.flowRight { + float: right; + margin-left: 10px; +} +.flowLeft { + float: left; + margin-right: 10px; +} diff --git a/mariam/03_09_original/_images/200px-W3C_Icon.png b/mariam/03_09_original/_images/200px-W3C_Icon.png new file mode 100755 index 0000000000000000000000000000000000000000..4abe8c2cca29ceabe21a29f6f914ed276f66ed2d GIT binary patch literal 6339 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 a2nm*{0+2GGvBy6MfSQuFV%1BFp#K3EyA(?R literal 0 HcmV?d00001 diff --git a/mariam/03_09_original/_images/tags.png b/mariam/03_09_original/_images/tags.png new file mode 100755 index 0000000000000000000000000000000000000000..e7165fdd26928f926b33408bdc637c8f6557ca92 GIT binary patch literal 10917 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 z z749G~mhlGJ>hM)fl-S|lDu|zm*)yS8&E4dUZ32WG+Rk5VHSSa&ycXo0j9P(7`?yil z#iS>BWU7^1f--ex|4EVJje;S1xjr~Mw z{n9D>G4k}zqN}!3O4UflRottyV(#U1Ql;N2jQ6Y6{ly^SBSd3MHX_P1d z`;;4ZY=xwS#Ie{15yR3NG2Zktxh|s1Z$ml?2JRT^7`C%1d&%VjB*yck0@J+d{!POUXbK8jy4W;N#yH zki;4D9=1AELw^fo6IKm%L~Ph}(G{XUFZ)s&HT1FiA+vcfsx|Zht^;fcA|8)vB*BGz z$*{JB z`koG9^%B@wlcsIUhMi+o_%y}iYO^wW#c~usZO_3N6(ivE^pr#{e*TQ^8XTa>eraW*#GBuVEUO;D&wQ!{xF$ z>zf0j1cC6i3jd9b$xW~>GKG-m0{m1zCJcsw^KLJH$)odTCs z#VxGMg6#T%OOtT3NH&ee%zLi1eM^q+=BvNU`cI|wtJvX&6k8a|PSuyvdbQU3Rj!ED zP|J-=s(EAX&27|1Y8Mrrd`tAaku1itIU?sWCh+p9?JCXN&6{60VstP`Etws6RbuiP zwTWY0;VM&56a8`;B;x;hPD#kiO+i`)Xh_xE!BAiLv_Ii%^mBu0H13d`zUDE92` zxl*B@O$-LLnyB=_{p_^&o<2TJbjJmpH0zYbNUuU>ED{jVQtlK$O}pT7xAM;>1`>ul^=pM9kG>$*N8@R*qfD=w$U@omC-DHm7!oEK%8<{7`Fq1Qf7c%D&vYV4ae zBGT<9m`X;TU2mLFQ19`_s(`f<*>z0?H!{E+-P4-tTW_@lqiwl`DT;Ifd3=%;*saJV zV_ur`)rD*GYEXWgWxy=0GFStX<{Io5vTh(1ws1UB+j{ zL6fK0g)v^{PAEdaU(vnqYGu`xv6?VH(;O7&Ipk_N(rd1QLs!!!cuc!t@92!R(pY6# zLC#*Jm*4vFeJh8UKb9T_yFsg0Mn*i(UEn0jVCC*BdoijyHOuah$Mchs5K*sjdni8o z;#zV6nDY5v=R5@(2h)_WRv=u-{^AF_@j-=_H#Un1e(OC#j|H_v@^%|vl%0%VHQVZL z@x-5Jp=^D35HLZj<(<$1*152d_@}^ei|XHM3Qnd{=ITcjjM0; z4zlv01v&hyf|L92a5+9a-2bg#zwfBorK>r5AP$%42zQ?Ta~Gnx9zOEHEJf@NDVnx2 zSM7tOg}r%6LH_t}hk7rWWD#>VXJD%RhjGKr(+!YrOBn`PKYQer8cl_-K zS1T~TN~Z(@?=~GxMyZ)Etps^mVJ^3Sk|YpTLWQSNe-I`?vHD3g15r*&zt*Kd4_-2u zG1~y06F#T|jScS|0@or2Ut;(h+RHpa>`l?A+gSU!!ocm2YA(X z@}kVdyFr3eYfP6E6{azwHXS7v&Kr7LsArcA-+Sqj!&kItWVLb3ccka zgjUWuE!)dg)H77Q859q>4f?o&9Os^Clp0`sb;pof<6>7f`~nj)H#6_eCY(EMQE(U6 z8{>-5j1JLAAi9B1)MR>yM%%R4gZ7?%?o@r)k{9eF5=0*RjUrX(kaem%)D??M$cuLl zG3Lm(07Y80M7z9hL5MNF)tA?{y25WE072P|)Bv!AR~b|>G`AF$?U=h* zJi&Q;`df7RXLtDrg&B)t{o)%q3;y|I9}UMTBQS5=HTJo)j5nFcEyzf6q)tBlGhkF= z_Ou4go3L9Be8Di*ZK7+EJB??t&z;J2nQm3^Aie4p#;OB4l(@OD4Hk^)4j_^UJMl^c zmdr1mnCjZ{@icZJV9>2Fclh9xBY>Fc$_{{P4&5!338Y@{VGVIWex~wnmP2CI~m>uUd1n1-dkLHPJH2 zX~a585Z{dDMGFfjb4v@sWY*qKsqa7oaAcg48AA~nV@X;n}T~_M1-t3m#TRJ?|Lx$O2qUL2`*6vLO{Xzl4 zNGpmS6Ye*(FJ;`%X;~Uq7wR=Q^p;li|E?JOA6?GBx-0*SV(5QSkcA;a68+vEwD)i< YqDgu1E_L&;zEe1P>5qUKNz?HE1=_n7NB{r; literal 0 HcmV?d00001 diff --git a/mariam/03_09_original/intro.htm b/mariam/03_09_original/intro.htm new file mode 100755 index 0000000..b8c8138 --- /dev/null +++ b/mariam/03_09_original/intro.htm @@ -0,0 +1,52 @@ + + + + +Introduction to HTML + + + +HTML Essential Training +Introduction to HTML + +HTMLHTML, or Hypertext Markup Language, is the language used to describe the structure of content on the web. As with other markup languages, it uses tags to identify page elements and describe the page’s semantic structure. An easy way to visualize this is to consider the various types of documents you see on a day-to-day basis, like magazine and newspaper articles or documents created in a program like Microsoft Word. The formatting of those documents ensures that the information is presented clearly, with a distinct hierarchy. This allows readers to quickly scan the page and determine which information is important and how the content relates to each other. HTML allows us to do that for web pages by first establishing the overall document structure, and then formatting elements like headings and paragraphs. + +History + +HTML can trace its roots back to 1989 at CERN, the European Laboratory for Particle Physics. There, Tim Berners-Lee came up with the idea of having scientists from around the world collaborate on research. His idea was rather than simply making documents available on a server as many people were doing at the time, the documents themselves should be able to link to one another, in a way that would enhance collaboration and make information easier to find and more accessible. From this idea Tim created HTML (based off SGML, an earlier markup language) to format pages and HTTP (or Hypertext Transfer Protocol) to transfer them from one computer to another. Although the world didn’t quite realize it yet, the World Wide Web was born. + +As the popularity of the web increased in the early 90s, HTML underwent a series of rapid changes. Browser manufacturers like Netscape and Microsoft started to develop their own proprietary tags, and development bodies like the IETF (the Internet Engineering Task Force) and the W3C (the World Wide Web Consortium) were finding it difficult to gain traction with the standardization process of HTML. By 1995, the W3C created an editorial review board for HTML that included members of the W3C as well as representatives from browser developers and other organizations. This collaborative board had a major impact in stabilizing the HTML standard and reducing the uneven implementations that had plagued earlier browsers. + +This resulted in the HTML 4.0 specification being released in 1998. It was the most stable version of HTML up to that point, and formalized many of the improvements made to HTML over the years. It’s still the most widely used version of HTML and remains the baseline for authors and implementers alike. + +Around the time that HTML 4.0 was published, a movement began to evolve HTML towards a more flexible style of markup language. Although authors had tried to anticipate the tags necessary to markup documents, the spread of the World Wide Web and the diversity of user agents made keeping up with requirements difficult. In the eyes of many, migrating to a markup language like XML, which allows authors to create their own tags to represent content, would alleviate those concerns and allow HTML to evolve organically. XML also contains stricter formatting rules than HTML, and a sizable number of authors and developers found HTML’s lax parsing rules problematic. This effort resulted in the publishing of the XHTML 1.0 specification in 2000. Although it was not a dramatic departure from HTML 4.0, it did introduce new syntax rules to conform to XML requirements and eliminated the HTML elements that were seen to be dictating the presentation of content rather than the structure of it. + +Shortly after the 1.0 specification was published, work began on XHTML 2.0, which was to move HTML further towards XML. XHTML 2.0 was a dramatic departure from previous versions of HTML and was never able to gain any traction among browser developers. The specification languished for years in the W3C before its charter was revoked in 2009, essentially ending development. + +While the W3C was taking HTML down the XHTML path, a group of authors, developers, and organizations became frustrated with the lack of progress on updating HTML. This group decided to evolve HTML independently of the W3C and formed the Web Hypertext Application Technology Working Group (or WHATWG) in 2004. They began work on the Web Applications 1.0 standard, which extended HTML 4.0, adding clear parsing rules for user agents and creating APIs to make developing web applications easier. The W3C, realizing that XHTML 2.0 faced significant hurdles in adoption, began working with the WHATWG and began to jointly develop the new standard with them in 2008. Currently the W3C works on publishing a stable version of the specification, while the WHATWG continues to work on what they call a “living standard” of the specification. As a living standard, they’ve removed the version number and simply refer to it as “HTML.” + +HTML timeline + +
    +
  1. 1991: Tim Berners-Lee publishes “HTML Tags” which describes the initial 18 elements of HTML
    2. +
  2. 1992: NCSA develops the Mosaic browser, which will eventually evolve into Netscape
    3. +
  3. 1994: The Internet Engineering Task Force (IETF) creates an HTML working group to develop HTML specifications. Later that year the W3C was created to foster an open standards environment
    4. +
  4. 1995: HTML 2.0 specification is published
    5. +
  5. 1995: Microsoft releases Internet Explorer to compete with Netscape
    6. +
  6. 1997: HTML 3.2 specification is published
    7. +
  7. 1997: HTML 4.0 specification is published
    8. +
  8. 2000: XHTML 1.0 is published as a W3C recommendation
    9. +
  9. 2004: The WHATWG forms to continue work on HTML
    10. +
  10. 2006: W3C announces it will work with the WHATWG on HTML5
    11. +
  11. 2009: XHTML Working Group charter expires
    12. +
  12. 2012: W3C and WHATWG announce they will develop the HTML5 standard separately
    13. +
+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09_original/lab_instructions.txt b/mariam/03_09_original/lab_instructions.txt new file mode 100755 index 0000000..7327097 --- /dev/null +++ b/mariam/03_09_original/lab_instructions.txt @@ -0,0 +1,45 @@ +Challenge instructions for Chapter 03: Formatting Page Content + +Welcome to your first challenge! In this course’s challenges, you’ll work on completing the HTML Essential Training reference site. You won’t be building the site from scratch, rather you’ll be completing various portions of the site in varying degrees of completion. The goal is to reinforce and put into practice what you’ve learned in this chapter. + +For this challenge you’ll be planning and implementing a formatting strategy for the site. In the steps below I’ll list the tasks you need to perform, as well as the relevant files for each task. + +1. Determine a heading strategy. + a. Applies to: All pages + b. Explore each of the pages (intro.htm, links.htm, next.htm, reference.htm, structure.htm and syntax.htm) and carefully read through the text. + c. Determine which content should be represented as headings, and then which level of headings you should use for each page. Focus on being consistent in how you assign headings for each page. + d. Go through each of the pages, and format headings based on your strategy. + +2. Format paragraphs + a. Applies to: intro.htm + b. Determine which content should be represented by paragraphs and then format them appropriately. + +3. Controlling line breaks + a. Applies to: next.htm + b. In the section under “learning web design” there are four recommendations. Each recommendation has an initial sentence followed by descriptive text. Using a line break, format these paragraphs so their initial sentence appears on its own line. + +4. Determining emphasis + a. Applies to: next.htm + b. In the file next.htm examine the four pieces of advice in the Learning Web Design section. Determine how to best emphasize the first line in each paragraph. Think about ways that you could isolate that line or emphasize it in a way that denotes its importance to the rest of the paragraph. + c. In the last advice paragraph (“break things”), display the quotes in italics. In the same paragraph, emphasize the last line “Always challenge yourself” so that it’s importance is indicated. + d. In the list of resources below the advice section, make sure all top-level list items appear in bold. + +5. Displaying special characters + a. Applies to: reference.htm + b. Scroll down and find the table that displays common named character entities. + c. Preview the page in a browser, and using the table as a reference, add the appropriate entity into the first table cell to provide an example of that character. + d. In the definition for Elements, wrap the word "tags" in quotes using a left and right quote special character. + +6. Inserting Images + a. Applies to: Intro.htm + b. Examine the existing image at the top of the page. Note the class “flowRight” which is used by CSS to control styling. You’ll learn more about this in the chapter on CSS. + c. Scroll down until you locate the paragraph “Shortly After the 1.0 specification…” At the beginning of that paragraph insert an image that: + i. points to the 200px-W3C_icon.png in the _images directory + ii. uses the alt text “W3C logo” + iii. passes the value of 200 for width, and 136 for height + iv. applies a class of “flowLeft” + +When you're finished, open up the same files from the "finished_files" directory and compare your results with mine. Do they match? Were there times when you disagreed with the strategy I used for headers, creating lists, or emphasizing text? Often these decisions are judgment calls, and don't necessarily have a "right" answer. What's important is that you have a sound reason for making the decision you did that's based on valid, semantic HTML. For more practice, go through the files and compare your formatting to the existing formatting. Is it consistent? Is the formatting what you expect, or would you make changes? + + + diff --git a/mariam/03_09_original/links.htm b/mariam/03_09_original/links.htm new file mode 100755 index 0000000..2bbd37c --- /dev/null +++ b/mariam/03_09_original/links.htm @@ -0,0 +1,50 @@ + + + + +Creating Links + + + +HTML Essential Training Creating Links + +

Perhaps the most important aspect of HTML is the ability to link from one document to another. This is the basic concept underlying the web and without this functionality the World Wide Web would not exist.

+Link syntax +

Creating links is relatively straightforward, and the syntax provides a lot of flexibility in where and how links are applied. To create a link, you’ll use the anchor element (<a>) to wrap the content you wish to convert to a link.  Attributes inside the anchor tag tell the browser where the page is linking to, or point to an external resource that the browser should download.
+ Take the following link example:

+
<a href=”syntax.htm” title=”learn more about syntax”>HTML syntax</a>
+

Here the text “HTML syntax” would now appear as a clickable link. The href attribute tells the browser how to resolve the link; that is where the user should be directed when the link is clicked. The optional title attribute provides a description of the link and is helpful in making the link more accessible.

+Link types +

There are three basic types of link: absolute, site-root relative, and document relative. Each of these types refers to the value of the href attribute, which directs how the browser should resolve a link once the link has been clicked.

+Absolute links +

These links contain the entire URL necessary to resolve a link, including the protocol. This is usually done for external links, which are links to pages outside of the current site. Here’s an example of an absolute link:

+
<a href=”http://www.lynda.com” title=”You can learn it at lynda.com!”>lynda.com</a>
+Document relative links +

These links are commonly used to navigate internally within a site. For example, if you were on the home page of your site, and wanted to navigate to the contact page, you simply provide the path from the home page to the contact page for the href value. Doing this requires you to understand the directory structure of your site, and when you need to navigate into, or out of, folders. Take the following example:

+
<a href=”contact.htm” title=”our contact page”>Contact us</a>
+

This link assumes that the contact page and the current page are in the same directory. If the contact page were located in a directory below the current page, the link would look like this:

+
<a href=”resources/contact.htm” title=”our contact page”>Contact us</a>
+

This assumes the contact page is in a directory titled “resources” and is one level below the current page. To move out of a directory, you precede the page with the “../” characters. In this case of our contact link it would look like this:

+
<a href=”../contact.htm” title=”our contact page”>Contact us</a>
+

This link would move up from the current directory and find the contact.htm page in the parent directory. You can use as many of these “../” as you need to move up and properly resolve the link.

+Site-Root Relative Links +

These are similar to document relative links, but start at the root folder for the site and then move down through directories to the desired page. Unlike document relative links, which depend on the current location of the page to properly resolve links, site-root relative links are written the same no matter the current location within your site. All links are preceded by a forward slash (/) that refers to the root directory. Here’s an example:

+
<a href=”/contact.htm” title=”our contact page”>Contact us</a>
+

In this example, the link is resolved by going directly into the site’s root folder and finding the contact page. If the contact page were located deeper within the site, the link would look like this:

+
<a href=”/resources/contact.htm” title=”our contact page”>Contact us</a>
+Fragment identifiers +

Occasionally you’ll want a link to refer to a specific location within a page. This can be done using a special kind of link called a fragment identifier. These links point to elements with a specific ID attribute. Let’s say, for example, you have a long list of FAQs on a page organized by categories and you had a heading at the top of each category. If you assigned each heading an ID attribute, you could use those IDs to create a links that jump to specific categories. For example, you could format the Camping FAQs heading like this:

+
<h2 id=”camp”>Camping</h2>
+

Elsewhere on the page you could link to this section by creating the following link:

+
<a href=”#camp”>Learn more about camping</a>
+

Note the hash symbol (#) prior to the ID value. This tells the browser to look for an element with the ID value that follows.You can link to fragment identifiers on external pages as well. Simply append the fragment identifier to the URL and the link will jump to not only to that page, but that specific section as well.

+
<a href=”faq.htm#camp”>Read our FAQ on camping.</a>
+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09_original/next.htm b/mariam/03_09_original/next.htm new file mode 100755 index 0000000..ddfa0fe --- /dev/null +++ b/mariam/03_09_original/next.htm @@ -0,0 +1,46 @@ + + + + +Next Steps + + + +HTML Essential Training Next Steps + +

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.

+Learning Web Design +

“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:

+

Learn how the web works. + 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.

+

Determine an area of focus, and start there. + 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.

+

Never stop learning + 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.

+

Break things! + There is no better teacher than experience. Build and experiment constantly. Ask yourself, “what would happen if I?...” or “wonder if I could build?...” 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. Always challenge yourself.

+Web Design Resources +

lynda.com online training library

+

HTML related titles

+

Web Design related titles

+

HTML specifications

+

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.

+

HTML 4.0

+

XHTML 1.0

+

WHATWG HTML5

+

W3C HTML5

+

W3C Markup Validation Service

+

Great for testing code and making sure you’re writing valid HTML syntax.

+

Mozilla Developer Network

+

One of the best online resources for web designers and developers. Great collection of articles, tutorials, and references.

+

HTML5 Rocks

+

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.

+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09_original/reference.htm b/mariam/03_09_original/reference.htm new file mode 100755 index 0000000..5a5f7d7 --- /dev/null +++ b/mariam/03_09_original/reference.htm @@ -0,0 +1,161 @@ + + + + +HTML Reference + + + +HTML Essential Training +HTML Reference + +

On this page you’ll find a quick reference to common HTML terms and a table of frequently used named character entities.

+HTML Terms +
+
Attribute
+
An HTML element property that provides additional information or functionality for an element. Attributes appear as a name/value pair with the value contained in quotation marks.
+
Block-Level Element
+
HTML tags that create blocks of content within the document such as headings and paragraphs. Block-level elements typically stack one on top of each other based on the order they appear in the code.
+
Child Element
+
Any HTML element that is contained inside another HTML element. Child element tags must close before their parent element tags.
+
Closing Tag
+
Appears after an element’s content and indicates the end of an element. Is identical to an element’s opening tag with the addition of a forward slash (/) prior to the tag’s character.
+
Comment
+
Reference information added to the code. May include an overview of more complex code, a reminder for future authors, or communications within a team.
+
CMS
+
CMS is short for Content Management System, and refers to any system designed to allow users to create and maintain content. For the web, it primarily refers to software designed to manage web sites and their content. Examples include Joomla! and WordPress.
+
CSS
+
Cascading Style Sheets (CSS)is a presentation language used to control the presentation and layout of web pages.
+
Doctype
+
Short for Document Type Declaration. Appears at the top of all HTML documents to trigger standards mode and identifies the version of HTML used by the document.
+
DOM
+
The DOM, or Document Object Model, is a representation of documents like HTML. The DOM can be thought of as an outline where tags are represented by “nodes.” Scripting languages like JavaScript reference the DOM when accessing or modifying page content.
+
Elements
+
HTML elements consist of an HTML tag, used to identify the content, and the content itself. Is often used interchangeably with the term tags although technically tags only refer to the tag itself.
+
FTP
+
FTP stands for File Transfer Protocol. It’s a common protocol used for transferring large files from one server to another.
+
HTTP
+
HTTP, or Hypertext Transfer Protocol, controls the formatting and transmission of HTML pages across web servers.
+
Inline-Level Elements
+
Elements that appear within the normal flow of text. Unlike block-level elements, inline-level elements do not start new lines within the normal document flow.
+
JavaScript
+
Scripting language developed by Netscape and used to control much of the functionality and behavior on the web.
+
Metadata
+
Additional information about the document or document content, typically stored in meta tags.
+
MIME Type
+
Short for Multipurpose Internet Mail Extension, MIME types are used to tell user agents what type of program a file or extension is. Without a proper MIME type, user agents can have trouble properly running applications or processing files.
+
Parent Element
+
An HTML element that contains another element. It is possible for an element to be a child of one element and the parent of another.
+
Replaced Element
+
Any HTML element where the contents of the element are replaced by something else. Examples would be images, video, or other plug-in content.
+
Tag
+
Markup characters that indicate what type of content appear on the page. Most tags consist of both an opening and closing tag.
+
URL
+
URL stands for Uniform Resource Locator. It serves as the address of a document or other resource on the web.
+
W3C
+
The W3C, or World Wide Web Consortium, is the standards body responsible for authoring the HTML specification.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+Common Named Character Entities +
Character Description Entity
double quotation mark&quot;
&ampersand&amp;
⟨left-angle bracket&lang;
⟩right-angle bracket&rang;
<less than symbol&lt;
>greater than symbol&gt;
 non-breaking white space&nbsp;
'apostrophe&apos;
“left double quote&ldquo;
”right double quote&rdquo;
«left-pointing double angle quotation mark&laquo;
®registered sign&reg;
©copyright symbol&copy;
™trademark symbol&trade;
⁄fraction slash&frasl;
–en dash&ndash;
—em dash&mdash;
+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09_original/structure.htm b/mariam/03_09_original/structure.htm new file mode 100755 index 0000000..e24d832 --- /dev/null +++ b/mariam/03_09_original/structure.htm @@ -0,0 +1,36 @@ + + + + +Introduction to HTML + + + +HTML Essential Training +Structuring Pages + +Conveying meaning through structure +

Creating properly structured pages is the foundation of any good website. A solid semantic structure allows you to convey meaning and properly represent content types through nothing more than the page's markup. This, in turn, makes your content more accessible, easier to index and search, and makes it easier to repurpose. Remember that there are a lot of different devices, robots, and other user agents that will be reading your code. Without a consistent, semantic structure your site will be less effective.

+

Sectioning elements

+

One way to add meaning to your content is to organize them into sections that convey meaning and structure. For example it's pretty standard to contain introductory information within a section, page navigation within its own area, the page's main content in its own region, and related information within a sidebar. HTML contains numerous elements that are designed to assist in the logical structuring and semantics of page content.

+

In previous versions of HTML creating new sections of content was done almost exclusively through the use of heading tags, with divs being used to group areas of content together. Class or ID attributes would allow designers to attach more semantic meaning to the groups, although this meant little to most user agents. In HTML5 new sectioning and semantic elements were introduced to help represent commonly used sections and create more consistent page structures. Tags like the aside, article, footer, header, main, nav, and section allow authors to identify common page regions and convey more semantic meaning.

+

Although some of these elements are very specific, in many cases which element you'll use and how you'll structure them is very much a judgment call. Make sure, however, that your finished structure represents the desired document outline.

+Document outlines +

One of the fundamental concepts of HTML is that its documents can be represented by a document outline that summarizes the content of the page. Imagine a page being represented by a table of contents and you'll have a good idea of what one of these outlines might look like. These outlines assist in tasks such as quickly searching documents and making content easier to navigate for assistive devices.

+

Prior to HTML5, document outlines were generated entirely through the use of headings. An H1 at the top of the page would serve to identify the page content, and subsequent headings would create sections and subsections inside of it. This meant that having a strategy for when to use certain headings was critical for maintaining consistent document structure. In HTML5 a new outline algorithm was introduced that added the new sectioning elements to the heading elements and created a more sophisticated outlining model. Although not currently implemented by user agents it is still recommended that authors familiarize themselves with it so that they're using the new sectioning and semantic tags properly.

+

It is still considered to be a best practice to use heading tags to establish the document outline. Mozilla has a fantastic article on sections and outlines in HTML documents that I strongly recommend reading.

+W3C Warning +

At the time of the authoring of this course, the W3C had posted this warning regarding the HTML5 outline algorithm:

+
There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.
+WAI-ARIA Roles +

Carefully structuring an HTML page is the first step into ensuring that the content is accessible to all users. You should also use WAI-ARIA role attributes where appropriate to increase accessibility and improve semantics. WAI-ARIA is short for the Web Accessibility Initiative's Accessible Rich Internet Application specification. The roles attribute attempts to identify content and its capabilities by assigning it to a predefined role. This helps assistive devices understand what the content is, how it relates to other content, and how the content can be interacted with. The W3C has a fantastic resource on how WAI-ARIA works and how it should be used with HTML.

+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + diff --git a/mariam/03_09_original/syntax.htm b/mariam/03_09_original/syntax.htm new file mode 100755 index 0000000..8f0c8eb --- /dev/null +++ b/mariam/03_09_original/syntax.htm @@ -0,0 +1,64 @@ + + + + +HTML Syntax + + + +HTML Essential Training HTML Syntax + +

Because HTML is often the people’s first experience with coding, there can be a fair amount of apprehension about learning it. Thankfully, HTML syntax is relatively simple and easy to learn. Most people can learn the basics of HTML and begin coding it within the same day.

+A markup language +

HTML is a markup language. That means that content on the page is “marked up” by tags which identify the content inside of them. A paragraph, for example, can be identified by placing the “<p>” opening tag prior to the paragraphs content and the “</p>” closing tag at the end of a paragraph. The full paragraph would look like this:

+
<p>This is a paragraph.</p>
+

Tags consist of a left-angle bracket (<) followed by a character or characters that identify the tag (the “p” for paragraph) and a closing right-angle bracket (>). The closing tags for an element are exactly the same as an opening tag, except that a forward slash (/) will precede the tags characters.
+ Although most elements require an opening and a closing tag, the closing tag is optional for some elements and not required at all for others. While there are exceptions to the rule, for the most part any element that contains content inside the opening and closing tags also requires a closing tag.

+Basic document structure +

The core of all HTML documents revolves around three basic tags. First, an html tag (<html>) is required to identify the document as an HTML file. Directly inside the html tag, you’ll find the head element (<head>). The head of a document is where you’ll find the document’s metadata, the document title, and links to external resources such as style sheets and scripts. A good way to think about the document’s head is that it doesn’t contain any of the page’s visual content rather it contains information about the document and the resources that help make the page work. Directly after the document’s head, you’ll find its body (<body>). The body is where you’ll find all of the page’s actual content. Headings, paragraphs, images, lists, tables, and other content will be located here. At its most basic, an HTML file would look like this:

+

+<html>     
+     <head>
+     </head>
+     <body>
+     </body>
+</html>
+
+DOCTYPES +

If you’ve looked at HTML pages before, you’ve probably noticed a long, somewhat intimidating tag just before the opening HTML tag. This is a doctype declaration and it’s a very important but often misunderstood component of HTML pages. Essentially, it tells the user agent parsing your page which version of HTML (or XHTML) to expect, so that it knows which syntax rules to use when rendering your page. The doctype you use should be based on the version of HTML you’re using to author the page. While that all sounds good in theory, in reality most of the time a doctype is simply triggering “standards-mode” rather than “quirks mode” (based on older browsers non-standard way of rendering pages). For that reason alone, all HTML documents should be preceded by a doctype declaration. For more information on doctypes, and the history behind them, check out Mark Pilgrim’s excellent section on doctypes from his Dive Into HTML5 book. Here are some of the more common HTML doctypes:

+HTML 4.0 transitional +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+XHTML 1.0 Transitional +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+HTML5 +
<!DOCTYPE HTML>
+
+Element attributes +

Some elements can be enhanced through the use of attributes. Attributes allow you to provide more information or additional functionality to the content. Attributes are added to the opening tag of an element and consist of two parts, the name and value. Although the syntax varies based on the version of HTML you’re using, it’s standard practice to put values within quotation marks.

+
<h1 class=”headline”>Article’s main headline</h1>
+Replaced elements +

Some HTML elements represent content that is replaced by an outside resource such as an image, form control, or a video file. These elements are referred to as replaced elements and usually have a predetermined width or height. In some cases the elements will have attributes that tell the browser where to find an external resource like an image or video.

+
<img src=“photo.jpg” alt=“my awesome photo”> 
+Code structure +

HTML documents create structure by nesting elements inside of one another. You might group a section of page content together by wrapping them within a <div> or <section> element, for example. When nesting one tag within another one, you must first close any child elements prior to closing any parent elements.
+ This syntax, for example, would be incorrect:

+
<p>You must close all nested tags <strong>first!</p></strong>
+

Rather, the correct syntax would be:

+
<p>You must close all nested tags <strong>first!</strong></p>
+

HTML also has specific rules about which elements can be nested within other elements. A paragraph (<p>) for example, can’t be nested inside a heading (<h1>).  For the most part, these rules are based around the type of content the tag represents. HTML 4 has two basic types of content: block and inline. Block-level elements typically occupy their own line within a document, usually stacking one on top of each other in the order they appear in your code. Inline-level elements can appear within the flow of block level elements. Elements like strong (<strong>), bold (<b>), emphasis (<em>), italic (<i>), and span (<span>) are always found inside block-level elements.
+ HTML5, on the other hand, expands the concept of content types to seven different categories of content, with some elements belonging to multiple categories. This replaces the concept of block-level and inline-level elements and adds some additional nesting syntax rules. For the most part, the rules around nesting elements make sense and are fairly easy to pick up. You should be prepared, however, for it to take some time before you fully understand all of the rules surrounding nesting elements. One way to making sure to your code is structured properly is to validate your code through a service like the W3C’s Markup Validation service.

+Commenting code +

Often it is helpful to leave notes to yourself or other developers within your code. Perhaps you want to remind yourself what a certain script does, or remind a co-worker how to properly structure specific content. To do this, you’ll use comments. Comments should appear on their own line, and typically appear directly before or after the code they refer to. Comments begin with a left-angle bracket, an exclamation point, and two hyphens (<!--) and end with two hyphens followed by a right-angle bracket (-->).

+Comment syntax: +
<!-- This is a comment -->
+Using special characters +

Certain characters are reserved in HTML, meaning that you shouldn’t use them outside of their specific purpose. The angle brackets, for example, are reserved for tags, and using them anywhere outside of a tag could cause parsing errors in browsers. However, you can still use these reserved characters and other special characters or symbols by using what is known as a named character entity. These special codes tell the user agent to replace the entity code with a specific character. These entities begin with an ampersand (&) followed by the entity name and end with a semicolon (;). To display an ampersand, for example, you would type &amp; in place of the actual ampersand. You can find named character entity lists within the HTML specifications, although the format for them can be a bit hard to read. You can also find a useful list of character entities on the HTML Reference page, and a more comprehensive list on Wikipedia.

+

© lynda.com | follow me and lynda.com on Twitter! @jameswillweb @lyndadotcom

+ + From 3fd968e30af500f09ad60feebaea804ee887c8c8 Mon Sep 17 00:00:00 2001 From: ObjectiveTruth Date: Fri, 31 Aug 2018 00:09:21 -0400 Subject: [PATCH 6/7] Changed _images to images --- mariam/03_09/{_images => images}/200px-W3C_Icon.png | Bin mariam/03_09/{_images => images}/tags.png | Bin 2 files changed, 0 insertions(+), 0 deletions(-) rename mariam/03_09/{_images => images}/200px-W3C_Icon.png (100%) rename mariam/03_09/{_images => images}/tags.png (100%) diff --git a/mariam/03_09/_images/200px-W3C_Icon.png b/mariam/03_09/images/200px-W3C_Icon.png similarity index 100% rename from mariam/03_09/_images/200px-W3C_Icon.png rename to mariam/03_09/images/200px-W3C_Icon.png diff --git a/mariam/03_09/_images/tags.png b/mariam/03_09/images/tags.png similarity index 100% rename from mariam/03_09/_images/tags.png rename to mariam/03_09/images/tags.png From 90357ccf199ca3ec09725edf13eaca052fa18907 Mon Sep 17 00:00:00 2001 From: ObjectiveTruth Date: Fri, 31 Aug 2018 00:16:03 -0400 Subject: [PATCH 7/7] moved _images and _css to images and css --- mariam/03_09/{_css => css}/styles.css | 0 mariam/03_09/intro.htm | 6 +++--- mariam/03_09/links.htm | 2 +- mariam/03_09/next.htm | 2 +- mariam/03_09/reference.htm | 2 +- mariam/03_09/structure.htm | 2 +- mariam/03_09/syntax.htm | 2 +- mariam/03_09_original/{_css => css}/styles.css | 0 .../{_images => images}/200px-W3C_Icon.png | Bin mariam/03_09_original/{_images => images}/tags.png | Bin mariam/03_09_original/intro.htm | 4 ++-- mariam/03_09_original/links.htm | 2 +- mariam/03_09_original/next.htm | 2 +- mariam/03_09_original/reference.htm | 2 +- mariam/03_09_original/structure.htm | 2 +- mariam/03_09_original/syntax.htm | 2 +- 16 files changed, 15 insertions(+), 15 deletions(-) rename mariam/03_09/{_css => css}/styles.css (100%) rename mariam/03_09_original/{_css => css}/styles.css (100%) rename mariam/03_09_original/{_images => images}/200px-W3C_Icon.png (100%) rename mariam/03_09_original/{_images => images}/tags.png (100%) diff --git a/mariam/03_09/_css/styles.css b/mariam/03_09/css/styles.css similarity index 100% rename from mariam/03_09/_css/styles.css rename to mariam/03_09/css/styles.css diff --git a/mariam/03_09/intro.htm b/mariam/03_09/intro.htm index cd91b60..2271252 100755 --- a/mariam/03_09/intro.htm +++ b/mariam/03_09/intro.htm @@ -3,7 +3,7 @@ Introduction to HTML - +

HTML Essential Training

@@ -15,7 +15,7 @@

Introduction to HTML

  • HTML reference
  • Next steps
    • -HTMLHTML, or

    Hypertext Markup Language, is the language used to describe the structure of content on the web. As with other markup languages, it uses tags to identify page elements and describe the page’s semantic structure. An easy way to visualize this is to consider the various types of documents you see on a day-to-day basis, like magazine and newspaper articles or documents created in a program like Microsoft Word. The formatting of those documents ensures that the information is presented clearly, with a distinct hierarchy. This allows readers to quickly scan the page and determine which information is important and how the content relates to each other. HTML allows us to do that for web pages by first establishing the overall document structure, and then formatting elements like headings and paragraphs.

    +HTMLHTML, or

    Hypertext Markup Language, is the language used to describe the structure of content on the web. As with other markup languages, it uses tags to identify page elements and describe the page’s semantic structure. An easy way to visualize this is to consider the various types of documents you see on a day-to-day basis, like magazine and newspaper articles or documents created in a program like Microsoft Word. The formatting of those documents ensures that the information is presented clearly, with a distinct hierarchy. This allows readers to quickly scan the page and determine which information is important and how the content relates to each other. HTML allows us to do that for web pages by first establishing the overall document structure, and then formatting elements like headings and paragraphs.

    History

    @@ -27,7 +27,7 @@

    History

    Around the time that HTML 4.0 was published, a movement began to evolve HTML towards a more flexible style of markup language. Although authors had tried to anticipate the tags necessary to markup documents, the spread of the World Wide Web and the diversity of user agents made keeping up with requirements difficult. In the eyes of many, migrating to a markup language like XML, which allows authors to create their own tags to represent content, would alleviate those concerns and allow HTML to evolve organically. XML also contains stricter formatting rules than HTML, and a sizable number of authors and developers found HTML’s lax parsing rules problematic. This effort resulted in the publishing of the XHTML 1.0 specification in 2000. Although it was not a dramatic departure from HTML 4.0, it did introduce new syntax rules to conform to XML requirements and eliminated the HTML elements that were seen to be dictating the presentation of content rather than the structure of it.

    -W3C logoShortly after the 1.0 specification was published, work began on XHTML 2.0, which was to move HTML further towards XML. XHTML 2.0 was a dramatic departure from previous versions of HTML and was never able to gain any traction among browser developers. The specification languished for years in the W3C before its charter was revoked in 2009, essentially ending development.

    +W3C logoShortly after the 1.0 specification was published, work began on XHTML 2.0, which was to move HTML further towards XML. XHTML 2.0 was a dramatic departure from previous versions of HTML and was never able to gain any traction among browser developers. The specification languished for years in the W3C before its charter was revoked in 2009, essentially ending development.

    While the W3C was taking HTML down the XHTML path, a group of authors, developers, and organizations became frustrated with the lack of progress on updating HTML. This group decided to evolve HTML independently of the W3C and formed the Web Hypertext Application Technology Working Group (or WHATWG) in 2004. They began work on the Web Applications 1.0 standard, which extended HTML 4.0, adding clear parsing rules for user agents and creating APIs to make developing web applications easier. The W3C, realizing that XHTML 2.0 faced significant hurdles in adoption, began working with the WHATWG and began to jointly develop the new standard with them in 2008. Currently the W3C works on publishing a stable version of the specification, while the WHATWG continues to work on what they call a “living standard” of the specification. As a living standard, they’ve removed the version number and simply refer to it as “HTML.”

    diff --git a/mariam/03_09/links.htm b/mariam/03_09/links.htm index 5ed08ef..710b60f 100755 --- a/mariam/03_09/links.htm +++ b/mariam/03_09/links.htm @@ -3,7 +3,7 @@ Creating Links - +

    HTML Essential Training Creating Links

    diff --git a/mariam/03_09/next.htm b/mariam/03_09/next.htm index a9122ae..8c62469 100755 --- a/mariam/03_09/next.htm +++ b/mariam/03_09/next.htm @@ -3,7 +3,7 @@ Next Steps - +

    HTML Essential Training Next Steps

    diff --git a/mariam/03_09/reference.htm b/mariam/03_09/reference.htm index a7558fb..573c3d8 100755 --- a/mariam/03_09/reference.htm +++ b/mariam/03_09/reference.htm @@ -3,7 +3,7 @@ HTML Reference - +

    HTML Essential Training

    diff --git a/mariam/03_09/structure.htm b/mariam/03_09/structure.htm index 0f0e932..f3928df 100755 --- a/mariam/03_09/structure.htm +++ b/mariam/03_09/structure.htm @@ -3,7 +3,7 @@ Introduction to HTML - +

    HTML Essential Training

    diff --git a/mariam/03_09/syntax.htm b/mariam/03_09/syntax.htm index 84ab827..bf8700b 100755 --- a/mariam/03_09/syntax.htm +++ b/mariam/03_09/syntax.htm @@ -3,7 +3,7 @@ HTML Syntax - +

    HTML Essential Training HTML Syntax

    diff --git a/mariam/03_09_original/_css/styles.css b/mariam/03_09_original/css/styles.css similarity index 100% rename from mariam/03_09_original/_css/styles.css rename to mariam/03_09_original/css/styles.css diff --git a/mariam/03_09_original/_images/200px-W3C_Icon.png b/mariam/03_09_original/images/200px-W3C_Icon.png similarity index 100% rename from mariam/03_09_original/_images/200px-W3C_Icon.png rename to mariam/03_09_original/images/200px-W3C_Icon.png diff --git a/mariam/03_09_original/_images/tags.png b/mariam/03_09_original/images/tags.png similarity index 100% rename from mariam/03_09_original/_images/tags.png rename to mariam/03_09_original/images/tags.png diff --git a/mariam/03_09_original/intro.htm b/mariam/03_09_original/intro.htm index b8c8138..dab1d4d 100755 --- a/mariam/03_09_original/intro.htm +++ b/mariam/03_09_original/intro.htm @@ -3,7 +3,7 @@ Introduction to HTML - + HTML Essential Training @@ -15,7 +15,7 @@
  • HTML reference
  • Next steps
    • -HTMLHTML, or Hypertext Markup Language, is the language used to describe the structure of content on the web. As with other markup languages, it uses tags to identify page elements and describe the page’s semantic structure. An easy way to visualize this is to consider the various types of documents you see on a day-to-day basis, like magazine and newspaper articles or documents created in a program like Microsoft Word. The formatting of those documents ensures that the information is presented clearly, with a distinct hierarchy. This allows readers to quickly scan the page and determine which information is important and how the content relates to each other. HTML allows us to do that for web pages by first establishing the overall document structure, and then formatting elements like headings and paragraphs. +HTMLHTML, or Hypertext Markup Language, is the language used to describe the structure of content on the web. As with other markup languages, it uses tags to identify page elements and describe the page’s semantic structure. An easy way to visualize this is to consider the various types of documents you see on a day-to-day basis, like magazine and newspaper articles or documents created in a program like Microsoft Word. The formatting of those documents ensures that the information is presented clearly, with a distinct hierarchy. This allows readers to quickly scan the page and determine which information is important and how the content relates to each other. HTML allows us to do that for web pages by first establishing the overall document structure, and then formatting elements like headings and paragraphs. History diff --git a/mariam/03_09_original/links.htm b/mariam/03_09_original/links.htm index 2bbd37c..d1c7ea8 100755 --- a/mariam/03_09_original/links.htm +++ b/mariam/03_09_original/links.htm @@ -3,7 +3,7 @@ Creating Links - + HTML Essential Training Creating Links diff --git a/mariam/03_09_original/next.htm b/mariam/03_09_original/next.htm index ddfa0fe..e7ecbd1 100755 --- a/mariam/03_09_original/next.htm +++ b/mariam/03_09_original/next.htm @@ -3,7 +3,7 @@ Next Steps - + HTML Essential Training Next Steps diff --git a/mariam/03_09_original/reference.htm b/mariam/03_09_original/reference.htm index 5a5f7d7..93fa0b2 100755 --- a/mariam/03_09_original/reference.htm +++ b/mariam/03_09_original/reference.htm @@ -3,7 +3,7 @@ HTML Reference - + HTML Essential Training diff --git a/mariam/03_09_original/structure.htm b/mariam/03_09_original/structure.htm index e24d832..b64cd69 100755 --- a/mariam/03_09_original/structure.htm +++ b/mariam/03_09_original/structure.htm @@ -3,7 +3,7 @@ Introduction to HTML - + HTML Essential Training diff --git a/mariam/03_09_original/syntax.htm b/mariam/03_09_original/syntax.htm index 8f0c8eb..5bc56d2 100755 --- a/mariam/03_09_original/syntax.htm +++ b/mariam/03_09_original/syntax.htm @@ -3,7 +3,7 @@ HTML Syntax - + HTML Essential Training HTML Syntax