2. HTML: HYPER TEXT MARKUP LANGUAGE
• The rules of HTML allow consistent display of information
on different browsers and platforms.
• Pages written in html use the file extension of .html or .htm
• The file path is the website address or the URL* in the browser address bar
• You can view any html file in a web browser, even local files that are not yet published to the web
• You can view the raw source file, seen by right-clicking on a web page and selecting view page source
Try it, in your browser, go to a random web page, and view it’s source
4. PLATFORMS
The physical device that the web page is viewed on
• Computer
• Tablet
• Smartphone
• Screen-reader which speaks the words on the
page
Bonus terminology
Responsive Design: creating a web page to
dynamically change based on different sized
displays
Graceful Degradation: creating a web page that
functions even in older versions of browsers,
platform
5. URL
Uniform Resource Locator (URL), the web address that specifies the file’s location on a network
Example of a URL http://www.Albertus.edu
the http stands for hypertext transfer protocol
the :// follows
then the subdomain either www. or the my. in http://my.albertus.com
the the domain in this case albertus
then the domain extensions
most commonly used are are .com, .gov and .edu (for commercial, government, and educational
sites
notice how in your browser my.albertus.edu takes you to a different site entirely than www.Albertus.edu
Albertus is the domain, www indicates the main domain. Where do you go if you just type Albertus.edu?
6. URL STRUCTURE
http://www.albertus.edu/undergraduate-degrees/apply-for-admission/index.php
DOMAIN or
SITE ROOT
FOLDER
Public_html
SubfolderSubfolder File
each slash in the url path indicates that a subfolder of it’s parent
directory, the root folder is most usually called public_html and the
folders inside organize the site structure. Any file with the name index
will automatically display for that directory, and you do not have to
include it’s name in the url. If your file has another name, ie. contact.html
then you would include it’s name in the url.
7. DOMAINS AND FILE HOSTING
• Domains are the name (you buy the name itself and you can direct it to any location you’d like)
examples: albertus.edu, bethlovell.com, hamsters.net, etc.
• File hosting is actual storage for your html files on the web. You need this if you are creating your own
site from scratch, maybe not if you are using a blogging, portfolio, or webbuilding site online, such as
wordpress.com, weebly, wix or blogger. Your files in these instances live on those companys’ servers.
You might want your own file hosting if you want to use scripting languages that these other sites do not
provide, or if you want more control over the kinds of files and types of services there. Ie. Php for
databases or dynamic web pages, etc.
8. CMS: CONTENT MANAGEMENT SYSTEM
A content management system (CMS) is a software application or set of related programs that are used to
create and manage digital content. This usually consists of a database for all content, or user-entered data,
such as writing or images, and a particular language or code written to link the content to the web
browser and allow users to manage templates that are expressed in css or a css-like language.
• Blogs like blogger and wordpress are content
management systems and they rely on dynamically fed
CONTENT which is stored in a database, being accessed
by a CMS (content management system) that structures
the data in a specific way, and styled by CSS Cascading
Style Sheets which affects the appearance of the site.
• Content: what you write
• CMS: the structure of how this information is organized both on a
single page and across a site, which gets grouped by tags, dates,
types of material
• CSS: the way this visually appears in a browser or on a platform
9. MOST WEB PUBLISHING THESE DAYS USES
CONTENT MANAGEMENT SYSTEMS OR CMS
• CMS are great because you log in and get a box to type into and click publish. You pick from a few
themes and styles and then you only ever have to update your stories and pictures. Your navigation,
site structure, and design stays the same. This is wonderful, but knowing html and css will help even the
casual web publisher when it comes to design and structural decisions within your story or your theme.
10. WYSIWYG EDITORS
• WHAT YOU SEE IS WHAT YOU GET
• Adobe Dreamweaver, Google Sites, and even
Word allows you to format your page on the
screen and save it as html, and behind the scene,
it is generating the HTML code to make this
happen. Sometimes this can be annoying in
Word. In which case you can right click and paste
choosing paste options to remove html
formatting if you are copying something from a
web page but want to use your own style, or vice
versa.
11. CSS CASCADING STYLE SHEET
• This is the presentation level of the web page, how it displays, what fonts,
colors, alignment and other types of design choices about your page. It is
called cascading because depending upon where you insert these “styles”
the browser shows the hierarchy. You will get a sense of this as you work
on css at codeacademy and later as we work together on your site.
• Special note: The cascading part is why sometimes if you are working
within a blog or another content management system that uses
TEMPLATES and you try to apply a particular style to your edit, it may not
work as planned, because something in the back-end, in the code, is
overwriting your page-level style choice. So that is one good reason to
know html and css even if you are not going to code by hand.
12. SITE ARCHITECTURE
• How are you going to organize a site, both in terms of its folders and in terms of its parts.
• You can create a site map, which is like a large org chart
• You can draw wireframes and thumbnail sketches of where you want certain information to go
13. COMMON ELEMENTS OF MOST SITES
Logo
Masthead
Banner
Navigation
Body
Sidebar
Search box
Footer
Activity: Visit a few sites and identify these elements
14. NEXT TIME: BEST PRACTICES
• File Formats and sizes
• Websafe colors
• Naming Schemes
• Graceful Degradation
• User interface design