SlideShare a Scribd company logo
1 of 14
CIS 383
THE INTERNET AND WEB PUBLISHING
BACKGROUND AND TERMINOLOGY
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
WEB BROWSERS
applications for viewing web pages
common examples
Internet Explorer
Safari
Chrome
Firefox
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
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?
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.
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.
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
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.
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.
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.
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
COMMON ELEMENTS OF MOST SITES
Logo
Masthead
Banner
Navigation
Body
Sidebar
Search box
Footer
Activity: Visit a few sites and identify these elements
NEXT TIME: BEST PRACTICES
• File Formats and sizes
• Websafe colors
• Naming Schemes
• Graceful Degradation
• User interface design

More Related Content

What's hot

Open Source CMS Playroom
Open Source CMS PlayroomOpen Source CMS Playroom
Open Source CMS Playroom
librarywebchic
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
Jeff Byrnes
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
Vlad Posea
 

What's hot (20)

3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...
3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...
3 Langkah Mudah Membuat Website Dakwah (User Friendly - SEO Friendly - Mobile...
 
Dreamweaver_Abhijit
Dreamweaver_AbhijitDreamweaver_Abhijit
Dreamweaver_Abhijit
 
html & css
html & css html & css
html & css
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Open Source CMS Playroom
Open Source CMS PlayroomOpen Source CMS Playroom
Open Source CMS Playroom
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
Web development basics
Web development basicsWeb development basics
Web development basics
 
Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3Artistic Web Applications - Week3 - Part 3
Artistic Web Applications - Week3 - Part 3
 
Web Pages
Web PagesWeb Pages
Web Pages
 
Week 6 Lecture
Week 6 LectureWeek 6 Lecture
Week 6 Lecture
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTML
 
Slides bootstrap-4
Slides bootstrap-4Slides bootstrap-4
Slides bootstrap-4
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Week2 lecture-whatiswebdesign-part1
Week2 lecture-whatiswebdesign-part1Week2 lecture-whatiswebdesign-part1
Week2 lecture-whatiswebdesign-part1
 
Basic of web design
Basic of web designBasic of web design
Basic of web design
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
Drupal: Collaborative Web Tools for Transportation Libraries
Drupal: Collaborative Web Tools for Transportation LibrariesDrupal: Collaborative Web Tools for Transportation Libraries
Drupal: Collaborative Web Tools for Transportation Libraries
 

Similar to Web Publishing terminology 1

Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
butest
 

Similar to Web Publishing terminology 1 (20)

DHTML
DHTMLDHTML
DHTML
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Introduction to PrintCSS.live
Introduction to PrintCSS.liveIntroduction to PrintCSS.live
Introduction to PrintCSS.live
 
A Step-by-Step Guide to Converting HTML and CSS to WordPress
A Step-by-Step Guide to Converting HTML and CSS to WordPress A Step-by-Step Guide to Converting HTML and CSS to WordPress
A Step-by-Step Guide to Converting HTML and CSS to WordPress
 
Web technologies-course 04.pptx
Web technologies-course 04.pptxWeb technologies-course 04.pptx
Web technologies-course 04.pptx
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Basic web designing 2
Basic web designing 2Basic web designing 2
Basic web designing 2
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
Css home
Css   homeCss   home
Css home
 
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundationGetting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
Thinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSSThinkful - Frontend Crash Course - Intro to HTML/CSS
Thinkful - Frontend Crash Course - Intro to HTML/CSS
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
 
Visual Design for Content Management Systems
Visual Design for Content Management SystemsVisual Design for Content Management Systems
Visual Design for Content Management Systems
 
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxWELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of Web
 
Lesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdfLesson 8 Computer Creating your Website.pdf
Lesson 8 Computer Creating your Website.pdf
 

Recently uploaded

The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Recently uploaded (20)

Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
On National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan FellowsOn National Teacher Day, meet the 2024-25 Kenan Fellows
On National Teacher Day, meet the 2024-25 Kenan Fellows
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptxSKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
SKILL OF INTRODUCING THE LESSON MICRO SKILLS.pptx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
How to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POSHow to Manage Global Discount in Odoo 17 POS
How to Manage Global Discount in Odoo 17 POS
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 

Web Publishing terminology 1

  • 1. CIS 383 THE INTERNET AND WEB PUBLISHING BACKGROUND AND TERMINOLOGY
  • 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
  • 3. WEB BROWSERS applications for viewing web pages common examples Internet Explorer Safari Chrome Firefox
  • 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