Watch \u201cDon\u2019t Fear HTML\u2014HTML\u201d<\/a> about understanding tags.<\/p>\n\n\n\nMost elements begin with an opening tag<\/strong>, like <p><\/code> preceding some content, and then ends with a closing tag<\/strong>, <\/p><\/code>.<\/p>\n\n\n\nA few elements are self-closing<\/strong> and are not wrapped around content. They are called empty elements<\/em> and written differently:<\/p>\n\n\n\n\n<img \/><\/code> image<\/li>\n\n\n\n- <hr \/> horizontal rule<\/li>\n\n\n\n
- <br \/> line break<\/li>\n<\/ul>\n\n\n\n
Structure \u2013 Not Style<\/h3>\n\n\n\n
Even though each browser has a default way of rendering the look of a tag <h1><\/code> heads are the largest and boldest, <h2><\/code>is smaller, and so on) HTML tags must not be used to define the look of content<\/strong> (style.) Instead, tags should logically define the structure of a page, representing the relative importance and structural aspects of each chunk of information being presented: <h1><\/code> elements are the most important, <h2><\/code> elements are secondarily important, and so on. This is crucial for accessibility \u2014 allowing a screen reader to assist a blind person\u2019s understanding of the information.<\/p>\n\n\n\nRequired HTML Page Elements<\/h3>\n\n\n\n
Every HTML page must be minimally structured with these required elements:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <\/head>\n <body>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nThe first line must begin with <!DOCTYPE><\/code>. This is not an HTML element, but it tells the browser what language it\u2019s about to read. We use <!DOCTYPE html><\/code> for HTML5.<\/p>\n\n\n\n\n- The data within the
<html><\/code> tags makeup the HTML document.<\/li>\n\n\n\n- The data within the
<head><\/code> tags contain information (metadata) about the page and will not be visible<\/strong> in the browser window.<\/li>\n\n\n\n- The data within the
<body><\/code> tags contain the page\u2019s content that will be visible<\/strong> in the browser window.<\/li>\n<\/ul>\n\n\n\nCommon HTML Elements<\/h3>\n\n\n\n
HTML provides the content, which is given structure by the use of markup tags. Tags almost always have an opening and a closing component.<\/p>\n\n\n\n
\n<html>\u2026<\/html><\/code> \u2014 Encapsulates the entire page<\/em><\/li>\n\n\n\n<head>\u2026<\/head><\/code> \u2014 Contains metadata, or information about the page<\/em><\/li>\n\n\n\n<body>\u2026<\/body><\/code> \u2014 Contains all content which will be visible to the user in the browser<\/em><\/li>\n\n\n\n<p>\u2026.<\/p><\/code> \u2014 Creates a paragraph<\/em><\/li>\n\n\n\n<br \/><\/code> \u2014 Adds a line break (self- closing, no closing tag needed)<\/em><\/li>\n\n\n\n<hr \/><\/code> \u2014 Separates sections with a horizontal rule (self-closing)<\/em><\/li>\n\n\n\n<h1>\u2026<\/h1><\/code> \u2014 Displays a heading (h1\u2013h6)<\/em><\/li>\n\n\n\n<! -- \u2026 --><\/code> \u2014 Inserts a comment (readable by humans, not by browsers, to explain code)<\/em><\/li>\n\n\n\n<ol>\u2026<\/ol><\/code> \u2014 Creates an ordered list<\/em><\/li>\n\n\n\n<ul>\u2026\u2039\/ul><\/code> \u2014 Creates an unordered list<\/em><\/li>\n\n\n\n<li>\u2026<\/li><\/code> \u2014 A list item with an ol or ul<\/em><\/li>\n\n\n\n<img \/><\/code> \u2014 Inserts an image into the document (self- closing)<\/em><\/li>\n\n\n\n<a>\u2026<\/a><\/code> \u2014 Inserts a link into the document<\/em><\/li>\n<\/ul>\n\n\n\nCommon CSS Elements<\/h3>\n\n\n\n
CSS gives style (visual attributes, position on the page) to the html content and structure.<\/p>\n\n\n\n
\nmargin<\/code> \u2014 Defines space between element border and parent<\/li>\n\n\n\npadding<\/code> \u2014 Defines space between content and its border<\/li>\n\n\n\nborder<\/code> \u2014 Surrounds a content box with a solid or dashed line<\/li>\n\n\n\nheight<\/code> \u2014 the height of an elements box<\/li>\n\n\n\nwidth<\/code> \u2014 the width of an elements box<\/li>\n\n\n\ncolor<\/code> \u2014 foreground or type color<\/li>\n\n\n\nbackground-color<\/code> \u2014 the color of a box\/container’s background<\/li>\n\n\n\nbackground-image<\/code> \u2014 affixes an images to the background of a box<\/li>\n\n\n\nfont-family<\/code> \u2014 typeface name<\/li>\n\n\n\nfont-size<\/code> \u2014 specified in ems or percent<\/li>\n\n\n\nfont-style<\/code> \u2014 sets italic<\/li>\n\n\n\nfont-weight<\/code> \u2014 sets bold<\/li>\n\n\n\ntext-align<\/code> \u2014 left, right, center, justified<\/li>\n\n\n\ntext-decoration<\/code> \u2014 sets underline, overtone, strikethrough and blink<\/li>\n<\/ul>\n\n\n\nLet\u2019s Write Code \u2014 HTML<\/h2>\n\n\n\n\n- Open Visual Studio Code (VS Code) and create a File>New File. Name it index.html and Save it to a folder on your desktop titled “LASTNAME-Ex1”.<\/li>\n\n\n\n
- Type in the HTML declaration to the top of the page:
<!DOCTYPE html><\/code><\/li>\n\n\n\n- Type an opening and closing <
html<\/code>> tag, and hit Return a few time to add so me lines in-inbetween.\n\n- It’s recommended to include a language “attribute” to the HTML tag, to inform the browser, screen readers and spell-checkers what language will be used on the page: <html lang=”en”><\/li>\n<\/ul>\n<\/li>\n\n\n\n
- Between the <
html<\/code>> tags, create an opening and closing <head<\/code>> element, and also a <body<\/code>> element.<\/li>\n\n\n\n- In the <
head<\/code>> section, type the following to title your page (title it whatever you\u2019d like):
<title><\/code>My First Website<\/title><\/code><\/li>\n\n\n\n- In the <
body<\/code>> section, create an <h1> heading, something like \u201cMy ART 320 Website\u201d.<\/li>\n\n\n\n- Create a
<p><\/code> paragraph. Type whatever you\u2019d like. (Hint: type \u201cLorem\u201d and hit return.) Be sure to use a closing tag.<\/li>\n\n\n\n- Add a second
<p><\/code> element, or more if you\u2019d like.<\/li>\n\n\n\n- Create an unordered list
<ul><\/code> and populate it with a number of list items <li><\/code>.<\/li>\n\n\n\n- Type
shift-option(alt)-f <\/code>to Format (auto-indent) the lines of code.<\/li>\n\n\n\n- Examine your work by double-clicking the index.html file in your Ex1 folder. It will open in your default browser.<\/li>\n\n\n\n
- In VS Code, change the unordered list
<ul><\/code> to an ordered list <ol><\/code> and see what happens.<\/li>\n\n\n\n- Somewhere in your body section, add a cat image. Type
<img src=\"https:\/\/placecats.com\/millie_neo\/300\/200\"><\/code>.<\/li>\n\n\n\n- Create a hyperlink. Type the following:
<a href=”https:\/\/unsplash.com\/s\/photos\/cats”>Have some cats!<\/a><\/li>\n\n\n\n - Add a rule at the bottom of your content:
<hr \/><\/code><\/li>\n\n\n\n- Add the following to the
head<\/code> section, to connect your html to a new CSS style sheet (which you will create in the next section):
<link href=\"style.css\" rel=\"stylesheet\"><\/code><\/li>\n<\/ol>\n\n\n\nCreate CSS Styles<\/h3>\n\n\n\n\n- In VS Code, create a new file titled style.css and save it to your Ex1 folder.<\/li>\n\n\n\n
- Type the following;
body {
background-color: #9DBAF5;<\/code>
margin: 50px 50px 50px 50px;
}<\/code><\/li>\n\n\n\n- View index.html in your browser to see the change.<\/li>\n\n\n\n
- Add style for your paragraphs:
p {
width: 400px;<\/code>
margin: 20px 0;<\/code>
}<\/code><\/li>\n\n\n\n- Remove the underline from your links, and change the color:
a {
color: #f1991e;
text-decoration: none;
}<\/code><\/li>\n\n\n\n- Bonus steps:\n
\n- Change the color of your body background.<\/li>\n\n\n\n
- Style the hr rule to match the width and margin of your paragraphs.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
Overview This exercise will use some common HTML and CSS elements to create a simple web page. If you are using your own personal computer, please download and install Visual […]<\/p>\n","protected":false},"author":295,"featured_media":0,"parent":35,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"class_list":["post-3453","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/3453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/users\/295"}],"replies":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/comments?post=3453"}],"version-history":[{"count":40,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/3453\/revisions"}],"predecessor-version":[{"id":4432,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/3453\/revisions\/4432"}],"up":[{"embeddable":true,"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/pages\/35"}],"wp:attachment":[{"href":"https:\/\/ubwp.buffalo.edu\/art320\/wp-json\/wp\/v2\/media?parent=3453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}