Demo: html5 structure
Simple Text/Web Editor • TextEdit –make plain text (osx) • Notepad++ (windows) • TextWrangler (osx) • Coda 2 (osx) • Sublime Text 2 (osx & windows) • Brackets (osx & windows) General Workflow (nomadic version) • Set up/verify web folder on local hard drive • Set up FTP (file transfer protocol) client • Download web files (html, css, jpg, gif, png) from server to local folder • Open/create web files from the local web folder (ONLY) • Edit web files • Test locally in browser (chrome) • Chrome inspect element • Validate code (w3c validator) • Upload web files from local drive to server • Test live in browser (multiple browsers) Coda 2 Setup • Launch Coda • Add new site o Nickname > general site keywords o Protocol > SFTP o Server > redwood.colorado.edu o User Name > youridentikey o Password > your redwood password o Root URL > http://redwood.colorado.edu/youridentikey ! Include subdirectory if applicable o Local URL > leave blank (advanced local server feature) o Remote Root > blank for root directory ! Subdirectory if applicable o Local Root > Set to local web folder • Double click on site thumbnail to launch • Select Files • Verify local and remote (server) connection • !!!Coda bug – Quit Coda and re-launch application • Double click on site thumbnail again • Test o Open local html page o Make minor change (carriage return) o Save o Badge should pop up on publish icon • Good to go.
What is html? • acronym for hypertext markup language • hypertext means ability jump to another document (links) • markup is a language for describing web pages. • markup tags define the structure of content in web pages • “view source” in any browser to see the html markup of a webpage html tags • html markup is called “tags” • tags are special keywords surrounded by angle brackets o
• html tags normally come in pairs o <p> …. </p> o exception is “empty tags” ! <meta><br><img> ! no closing tag because they don’t enclose anything they are “empty” • First tag = start or open tag • Second tag= end or close tag html document = <a href="/tags/Web_page/" rel="tag">web page</a> • html documents contain html tags and plain text to describe web pages • Web browsers (Chrome, <a href="/tags/Safari_(software)/" rel="tag">Safari</a>, <a href="/tags/Firefox/" rel="tag">Firefox</a>, IE, <a href="/tags/Opera_(web_browser)/" rel="tag">Opera</a>) read html documents and display them as web pages. • Browsers use tags to interpret the structure (outline) of web page to create the DOM (<a href="/tags/Document_Object_Model/" rel="tag">document object model</a>) </p><p>Example of bare minimum html document: <!doctype html> <html> <head> <meta charset=”utf-8”> <title>Hello World Hello World! html example explained • = specifies html5 rule set • = html document • = instructions for the browser o meta, title, css,
javascript •
= specifies character encoding •
= title of document • <body> = visible page content File extensions • .html or .htm • .html more popular = better </p><p>CaSE SeNSITiVITY • html5 is no longer case sensitive (however) • most developers keep their tags in lowercase for consistency (and as a nod to predecessor <a href="/tags/XHTML/" rel="tag">xhtml</a>) • good writing style Doctype declaration • you MUST specify the doctype in all of your html documents o tells browser what type of document to expect and what rules to follow. o consistent rendering across browsers o otherwise you get quirks mode ! browser emulates 1990’s era browser ! not good • the doctype declaration MUST be on the first line in your html document and before the <html> tag. • doctype declaration for html5 <!doctype html> • simplified version of previous doctypes <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> </p><p>Structure • information o most important feature of webpage • webpages are structured in outline form o headings o paragraphs o lists o figures (informational images) • parent-child relationships o most html elements can be nested (can contain other html elements). • good structure o ACCESSIBILITY o SEO o DOM html5 structural markup • <header> • <nav> • <section> • <article> • <aside> • <footer> Generic structure tags • <div> (block level) • <span> (inline) • used with CSS for design html headings • think outline -use html headings for the purpose of headings only </p><p> o DO NOT use headings to make text big or bold (presentational) • search engines use headings to index your pages (SEO) • use headings in order of hierarchy: <h1>This is a heading</h1> <h2>This is a sub heading</h2> <h3>This is a sub sub heading</h3> html paragraphs <p>This is a paragraph.</p> <p>This is another paragraph.</p> html links • absolute link o full http address o link to external website <a href="http://www.w3schools.com">link</a> • relative link o local .html address o link to internal web page o internal site navigation <a href="index.html">home</a> html attributes • html elements can have attributes • provide additional information about an element • always specified in the start tag <tag attribute=”value”></tag> • attributes must have values • values should be in quotes (writing style) html images (informational) • informational imagery uses the img should be in <figure> tags <figure> </figure> • img tag creates a placeholder for images • src attribute fills placeholder with image o common for images to reside in an images folder • width and height attribute defines image size to be displayed • alt attribute specifies an alternate text for an image o required for validation o displayed when image cannot be displayed (broken) o useful for people with disabilities (accessibility) o also useful as keywords for search engines (seo) • design (non-informational) imagery is handled by css o placed in background of elements o displayed visibly but hidden semantically html comments • inserted into the HTML code as programmer’s notes • makes code more readable or understandable • ignored when rendered by the browser and are not displayed <!-- This is an html comment --> </p><p>Lists Ordered Unordered <ol> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </ul> special characters < is the same as < > is the same as > © is the same as © non-breaking space </p>
</div>
</article>
</div>
</div>
</div>
<script type="text/javascript" async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8519364510543070"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var docId = '0f5f51ab840ba66e1861921d2c7cc6aa';
var endPage = 1;
var totalPage = 5;
var pfLoading = false;
window.addEventListener('scroll', function () {
if (pfLoading) return;
var $now = $('.article-imgview .pf').eq(endPage - 1);
if (document.documentElement.scrollTop + $(window).height() > $now.offset().top) {
pfLoading = true;
endPage++;
if (endPage > totalPage) return;
var imgEle = new Image();
var imgsrc = "//data.docslib.org/img/0f5f51ab840ba66e1861921d2c7cc6aa-" + endPage + (endPage > 3 ? ".jpg" : ".webp");
imgEle.src = imgsrc;
var $imgLoad = $('<div class="pf" id="pf' + endPage + '"><img src="/loading.gif"></div>');
$('.article-imgview').append($imgLoad);
imgEle.addEventListener('load', function () {
$imgLoad.find('img').attr('src', imgsrc);
pfLoading = false
});
if (endPage < 7) {
adcall('pf' + endPage);
}
}
}, { passive: true });
</script>
<script>
var sc_project = 11552861;
var sc_invisible = 1;
var sc_security = "b956b151";
</script>
<script src="https://www.statcounter.com/counter/counter.js" async></script>
</html> 