basic code syntax
syntax "…the set of rules that defines the combinations of symbols that are considered to be a correctly structured document…" —wikipedia
Html syntax and terms
html syntax describes the rules that define the methods for creating valid html code, documents or markup fragments.
elements components of an html document that define content and its hierarchical structure; instances of elements are identified by descriptive markup, usually a start-tag and end-tag
block elements elements used to structure something other than just a single line of content (examples: paragraphs, headings, forms and lists)
inline elements elements within a line of code (examples: links, images, emphasized text, form fields)
nested elements elements inside of other elements
tags define the start and close of elements (they use the <> and signs to contain attributes)
attributes a hierarchical/categorical setting for an element (examples are p, h1, h2, href, etc.), as follows:
<p> My name is Julie. </p>
Rules for tags and attributes
all tags and attributes must be in lowercase For example:
<p> and </p> is okay; <P> and </P> is not.
all tags must close Use a forward slash (/) inside of the greater-than and less-than tag brackets to close a tag.
all elements must nest properly Nesting elements are referred to as parent and child elements:
<p> This is a <i> good </i> example of tag nesting.</p> =
This is a good example of tag nesting.
<p> These tags are <i> not </p> nested correctly. </i> =
Well, it looks so bad I can't even display it.
some attribute values must be in quotation marks (as in the case of defining links):
<a href=”http://www.htmldog.com”> HTML Dog <a>
Basic structure of an html document
A standard html document must have the head, title, and body structural elements in order to be valid.
When you make a new dreamweaver html file, it generates these items and element tags for you:
document type declaration tells your html file how it will talk to the browsers
opening html element this defines everything within the page content as an html file and contains the following two required block elements:
head gives general information about the content of the html document (but isn’t content itself). The head tag must include a title element that will appear as the title of the page in any browser window. It’s also the name of the page in the bookmarks.
body this is where all of the viewable, audible or otherwise experienced content goes.
Here is an example of how they all show up together without any real publishable content in them:
comment invisible comments addressed to people interested in understanding the code can be placed right within the html of a file, in this format:
<!-- Here’s a comment -->
div a generalist block tag that groups together a chunk of html; it can be used for layout purposes
Css syntax
Linked to html, but completely different in its programming language, css syntax is a collection of rules made up of selectors, properties and values that all define the visual appearance of corresponding html files.
css rule a combination of settings, including a statement of designations for selectors, properties and values that determine the visual presentation for specific tags and html instances (attributes)
selector defines the part of the html (the attribute) to which to apply the declaring style statement
html selector specifies an html element to which the declarations get applied
id selector* specifies an html element with a corresponding id, to which declarations get applied; can only be used once on a page; can be used across multiple pages in a site
class selector* specifies an html element with a corresponding class to which declarations get applied; can be used many times on a single html page; can also be used across multiple pages in a site
property defines a specific presentational aspect for the targeted element you want to set (must end with a colon); examples range from colors to font sizes to line heights to background images
value defines what the property should be set to (must end with a semicolon)
units measurements made by either numbers, percentages or lengths
color defined by either hex values (# fff or #0000ff), rgb (0, 0, 255), or a name (i.e., “blue”). Hex/RGB color picker
There are three levels of style sheets. In reverse order of control: browser (last), author (second), user (first)
Applying css to html documents
CSS is useless on its own; it must be attached to html. Attach it one of 3 ways:
inline quick-fix method, styles can occur straight in the body of the html doc; discouraged.
embedded where css rules are defined and live in the head tag of the html doc; good for styles applying to only one page in a site.
external the cleanest, purest, best way of attaching css to a site with many pages that has the same over all styling; the css in this case exists as a totally separate file from the html docs, and can be attached to the html files various ways.
Studying live html and css
You can view and study the code of any existing web site by viewing its source code (for example: in Chrome, choose View > Developer > View Source). In Safari, go to Preferences, click Advanced, and then select “Show Develop menu in menu bar” to view source code. You can also “inspect” elements with a keyboard command in a browser (command + option + I on a Mac) to pull up a sidebar that will show you the html and css of a site.
example sites One Page Love and Mediaqueri.es are a couple of sites where you can regularly study many different web designs like the kind we’ll learn from this semester.