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

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...Wahyu Putra
 
Open Source CMS Playroom
Open Source CMS PlayroomOpen Source CMS Playroom
Open Source CMS Playroomlibrarywebchic
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBWahyu Putra
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSNYCSS Meetup
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSSSiddhantSingh980217
 
HTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLHTML Start Up - Introduction to HTML
HTML Start Up - Introduction to HTMLGrayzon Gonzales, LPT
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS FrameworksMike Crabb
 
Castro Chapter 3
Castro Chapter 3Castro Chapter 3
Castro Chapter 3Jeff Byrnes
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 
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 LibrariesAJ Million
 

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

Introduction to PrintCSS.live
Introduction to PrintCSS.liveIntroduction to PrintCSS.live
Introduction to PrintCSS.liveAndreas Zettl
 
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 HireWPGeeks Ltd
 
Web technologies-course 04.pptx
Web technologies-course 04.pptxWeb technologies-course 04.pptx
Web technologies-course 04.pptxStefan Oprea
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer NotesVskills
 
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 foundationMelanie Archer
 
Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter BootstrapAhmed Haque
 
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/CSSTJ Stalcup
 
Visual Design for Content Management Systems
Visual Design for Content Management SystemsVisual Design for Content Management Systems
Visual Design for Content Management SystemsDani Nordin
 
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxWELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxHeroVins
 
Fundamentals of Web
Fundamentals of WebFundamentals of Web
Fundamentals of WebSabir Haque
 
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.pdfAshleyJovelClavecill
 

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

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdfSoniaTolstoy
 
PSYCHIATRIC History collection FORMAT.pptx
PSYCHIATRIC   History collection FORMAT.pptxPSYCHIATRIC   History collection FORMAT.pptx
PSYCHIATRIC History collection FORMAT.pptxPoojaSen20
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3JemimahLaneBuaron
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...Marc Dusseiller Dusjagr
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAssociation for Project Management
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Celine George
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Educationpboyjonauth
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsanshu789521
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxheathfieldcps1
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxNirmalaLoungPoorunde1
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptxVS Mahajan Coaching Centre
 
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersMicromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersChitralekhaTherkar
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docxPoojaSen20
 

Recently uploaded (20)

A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdfBASLIQ CURRENT LOOKBOOK  LOOKBOOK(1) (1).pdf
BASLIQ CURRENT LOOKBOOK LOOKBOOK(1) (1).pdf
 
PSYCHIATRIC History collection FORMAT.pptx
PSYCHIATRIC   History collection FORMAT.pptxPSYCHIATRIC   History collection FORMAT.pptx
PSYCHIATRIC History collection FORMAT.pptx
 
Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3Q4-W6-Restating Informational Text Grade 3
Q4-W6-Restating Informational Text Grade 3
 
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
“Oh GOSH! Reflecting on Hackteria's Collaborative Practices in a Global Do-It...
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
Incoming and Outgoing Shipments in 1 STEP Using Odoo 17
 
Introduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher EducationIntroduction to ArtificiaI Intelligence in Higher Education
Introduction to ArtificiaI Intelligence in Higher Education
 
Presiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha electionsPresiding Officer Training module 2024 lok sabha elections
Presiding Officer Training module 2024 lok sabha elections
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Employee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptxEmployee wellbeing at the workplace.pptx
Employee wellbeing at the workplace.pptx
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Tilak Nagar Delhi reach out to us at 🔝9953056974🔝
 
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions  for the students and aspirants of Chemistry12th.pptxOrganic Name Reactions  for the students and aspirants of Chemistry12th.pptx
Organic Name Reactions for the students and aspirants of Chemistry12th.pptx
 
Micromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of PowdersMicromeritics - Fundamental and Derived Properties of Powders
Micromeritics - Fundamental and Derived Properties of Powders
 
MENTAL STATUS EXAMINATION format.docx
MENTAL     STATUS EXAMINATION format.docxMENTAL     STATUS EXAMINATION format.docx
MENTAL STATUS EXAMINATION format.docx
 

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