Internet Technology (AS21)
Internet technology module at FHNW 2021, major in BIT by Devid Montecciari
Internet technology module at FHNW 2021, major in BIT by Devid Montecciari
-
- 1 / 130
-
Cartes-fiches
What html list types are there?
- <ul> unordered list
- <ol> ordered list
- <li> list item
- <dl> description list
- <dt> a term in a description list
- <dd> the term in a description list
What is the difference between a HTML BLock and inline element?
Every HTML element has a default display value, depending on what type of element it is.
There are two display values: block and inline.
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
An inline element does not start on a new line and it only takes up as much width as necessary.
Div and Span both define a section in a document.
what are div and span elements?
the div element is often used as a container for other HTML elements, has no required attributes but style, class and id are common.
the span element is an inline container used to mark up a part of a text, or a part of a document. no required attributes but style, class, and id are common.
What html elements belong into the head tag?
The <head> element is a container for metadata (data about data)
The <head> element is placed between the <html> tag and the <body> tag
The <title> element is required and it defines the title of the document
The <style> element is used to define style information for a single document
The <link> tag is most often used to link to external style sheets
The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings
The <script> element is used to define client-side JavaScripts
The <base> element specifies the base URL and/or target for all relative URLs in a page
What is SEO
Search engine optimization is a methodology of strategies, techniques and tactics used to increase the amount of visitors (traffic) to a website by obtaining a high-ranking placement in the search results page of a search engine (SERP) - including google, bing, yahoo and other search engines
what layout options are there for html tags
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
what input type options are there? give a few examples
input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
what does CSS mean?
Cascading style sheets. describes how html elements are to be displayed.
p {color:red;} -> for tags nothing but the tag name
.className {color:red;} -> for classes dot and the class name
#id {color:red;} -> for id use the hashtag
can be defined with the "style" tag in the HTMLtag itself(inline) or an external link in header <link rel="stylesheet" href="stylesheet.css"> or internal by using a <style> element in the head section
describe the CSS box model from the inside to the outside
- content- the content of the box where text and images appear
- padding - clears an area around the content, padding is transparent
- broader a border goes around the padding and content
- margin- clears an area outside the border. margin is transparent
What is Bootstrap?
Bootstrap is a free front-end-framework for faster and easier web development. it includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels as well as optional JavaScript plugins.
Gives the possibility to easily create responsive design
What is SEO and why is it needed?
SEO is a marketing tool for brands to increase the no. of people visiting the website, thus increasing the opportunity to acquire a new customers.
- Visibility and Ranking
- SEO helps a webpage appear at a higher ranking in search results
- Higher ranking results are more visible to the users
- Web Traffic
- No. of visitors to the page are increased
- chances of sales are increased
- Trust
- higher ranked results are trusted more by the users
- users tend to consider the top recommendations of a search engine
- User Experience
- leads to a well-designed and user-centric website
- search engines can retrieve information easily
- Growth
- results in increased growth
How does a search engine work? name two important components of it
Crawling
- internet is a network of web pages, images, videos or other files accessible through links
- Crawling is a way to find the best path to reach these links
- can be automatically performed through robots called crawlers/spiders
- Stored in huge databases to be used later for providing search results
Providing most relevant results through Indexing
- Indexing is a way to organize information such that search engines can retrieve results very fast
- indexing makes pages available to crawlers and also provides information regarding the relevance
- Search engines provide answers to search queries which contain keywords
- higher the relevance of a web page to the search keywords, higher is its ranking in the search result
What are the limitations of search engines?
- Problems in crawling and indexing
- cannot complete online forms, content in forms remains hidden
- duplicate pages pose a problem in srawling
- error on websites
- unclear link structure in a web page
- content that is not text is difficult to reach
- problems in matching search queries to the content of the page
- using less common terms on web pages
- region-specific terms and spellings e.g. color/colour
- mismatch between content language and the target location of the audience
- mismatch between content and title of an article
Why is it so important to choose the right keywords when configuring your website?
- Ranking for the right keywords can make or break a company's website
- keyword research helps you to find phrases and topics which are most relevant to a business, have sufficiently high search volume, have low competition
- the majority of keyword phrases will be less-frequent, long-tail keywords
- the "long tail" of keyword research refers to the 80/20 rule
- only about 20% of the keywords people search for will be popular "fat head" terms
You need to discover valuable keyword phrases and topics, find keywords with sufficient search volume (using google AdWords, google trends, ...). Then you also need to find keywords you can actually rank for, find those with high demand and low competition i.e. high search volume but less difficult for ranking. Last but not least you need to craft a complete content strategy from keyword research finding main topics and child topics, find what content users expect when searching for keyword phrases, finding which phrases lead to a purchase
What are the to dos to create a search engine friendly design and development?
- Use browser guidelines - Webmaster guidelines
- Indexable content
- Crawlable Link Structure
- Resolvable URLs
- Pages with a huge number of links
- Canonical or Duplicate Versions
- Keyword usage
Describe the to do to create a search engine friendly design and development for the usage of browser guidelines?
- Use browser guidelines - Webmaster guidelines
- Google, user-centric design of web pages, clear hierarchy and text links, meaningful description in <title> and ALT attributes, and human-friendly URL using keywords or keyword phrases
- Bing Webmaster guidelines, clean URL structure with several keywords, content and links not hidden behind rich media like Adobe Flash, Javascript and Ajax. content matching and periodically refreshed to user search and text to be indexed should not be in images
Describe the to do to create a search engine friendly design and development for the usage of indexable content?
- Indexable content
- assign all images with ALT attribute
- add navigation and crawlable links to search boxes
- Add supporting text to pages that have Flash or Java plug-ins
- Add transcript to audio or video content
Describe the to do to create a search engine friendly design and development for the usage of crawlable link structure?
- Crawlable Link Structure
- Lets crawler browse through the content of a website
- problematic when no direct links exist for pages
Describe the to do to create a search engine friendly design and development for the usage of resolvable URLs?
- Resolvable URLs
- use proper <a> tags with href attribute (href should be an actual web address)
- e.g. google priority of keyword placement Domain>subdomain>folder>path/page
- SEO tips are: use subdomains carefully. separate path&page keywords with hyphens, anchors may help (#top), keyword effectiveness in URLs decreases as URL length and keywords position increases
Describe the to do to create a search engine friendly design and development for the usage of pages with a huge number of links?
- Pages with a huge number of links
- use rel="nofollow" if a page has a huge number of links
- tells the search engine that a particular link should not be interpreted
- do not have the same weight as normal links
- <a href="https://example.com" rel="nofollow">some text </a>
Describe the to do to create a search engine friendly design and development for the usage of canonical or duplicate versions?
- Canonical or Duplicate Versions
- canonicalization is a practice of organizing duplicate content such that it can be separate from the original content.
- use 301(permanent)/302(temporary) redirect to the correct URL - using JavaScript or similar such redirect code.
- use rel="canonical" for duplicate pages, e.g., pages created for testing. All duplicate pages have a canonical link to original page A as follows:
- <head><link rel="www.widgets.com/A/" rel="canonical"/></head>
- configuration in google search console.
- canonicalization is a practice of organizing duplicate content such that it can be separate from the original content.
Describe the to do to create a search engine friendly design and development for the usage of keyword usage?
- Keyword usage
- crawlable content should contain the search keyword
- order of words, spelling, punctuation and capitalization of keywords matter when ranking pages
- use <title> tag to provide a concise, accurate description of a page, it appears as clickable headline of the search results
- use <meta description="..."> tag to provide description of the web page
- avoid keyword abuse i.e., over-usage of specific keywords without relevant content
- avoid keyword cannibalization i.e., using keywords in link anchor text pointing to other pages on the website.
What are Sitemaps?
- An easy way for webmasters to inform search engines about pages on their sites that are available for crawling
- Provide additional metadata about each URL (when it was last updated, how often it usually changes, and how important it is, relative to other URLs in the site)
- Does not guarantee that web pages are included in search engines, but provides hints for web crawlers to do a better job of crawling your site
- Can be defined in 3 formats:
- XML – Extensible Markup Language (recommended)
- Easy for search engines to parse
- Relatively large file size due to opening and closing tags for every element, hence sometimes compressed
- RSS – Really Simple Syndication or Rich site summary.
- Easy to maintain as can be coded to automatically update when new content is added.
- Difficult to manage compared to XML due to its auto-updating property
- Txt – Text
- Easiest to write and maintain, mention one URL per line
- Metadata like a priority, last modified etc. cannot be added
- XML – Extensible Markup Language (recommended)
What are must haves when you want to use sitemaps in your page?
- Sitemaps must:
- Begin with an opening tag and end with a closing tag.
- Specify the namespace (protocol standard) within the tag.
- Include a entry for each URL, as a parent XML tag.
- Include a child entry for each parent tag.
- May use sitemap index file to group multiple sitemap files
- XML sitemaps can be generated using an online generator - https://www.xml -sitemaps.com/
What is a Robots.txt?
- A product of the Robots Exclusion Protocol, is a file stored on a website's root directory
- Using this file webmasters can indicate to search engines
- areas of a site to disallow bots from crawling
- locations of sitemap files
- crawl-delay parameters
- Pattern-matching using regular expressions can create complex rules to allow/disallow URLs
- * is a wildcard that represents any sequence of characters
- $ matches the end of the URL
- Should not include URLs corresponding to admin or private information as robots.txt is publicly accessible
How can you use a Robots.txt?
The basic format for a complete robots.txt file (name is case-sensitive):
User-agent: [user-agend name]
Disallow: [URL string not to be crawled - only one line for each url]
Allow: [only applicable for googlebot]
Crawl-delay: [how many milliseconds to wait before loading and crawling page content]
sitemap: [used to call out the location of any XML sitemaps associated with this URL]
E.g
User-agent: Googlebot
Crawl-delay: 4
Disallow: /
Dissalow: /*.xml$
What are the robots meta tags and parameters in HTML?
head section- creates page-level instructions for search engine bots, the robot name can bei either "robots" for all robots or the user-agent of a specific crawler
<meta name="robots" content="[PARAMETER]">
Parameter for the meta tag are
- noindex - tells search engine not to index a page
- index - default
- follow - even if the page isn't indexed, the crawler should follow all the links on a page
- nofollow - tells crawler to not follow any links on a page
- none - equivalent to using both the noindex and nofollow tags simultaneously
How to you measure traffic on a web page?
You measure with Analytics
- What to measure - Metrics:
- Which source contributes the most traffic - direct navigation, referral links, search engine
- Search engine referrals – no. of search engine visits in a month
- Visits referred by keywords in a search engine – top referring phrases
- Finding keywords that converts visitors to paying customers – search query referral conversion rate
- Which pages receive the most traffic from at least one search engine – no. of pages receiving referrals from
- How to measure - Analytics softwares:
- Google Analytics
- Moz Analytics
- Yahoo! Web Analytics
- Investigate based on the results of the analytics and take appropriate measures
What is a script?
A script is a series of instructions that a computer can follow to achieve a goal
A scripting language like JavaScript provides mechanisms to manipulate information in a web browser through object-orientation
What are Objects?
Objects are the representation of real-world data and use properties, events and methods
What are properties
Properties are the characteristics of an object. e.g object hotel, properties, name, rating, rooms, bookings, gym, pool....
How are web pages interpeted?
- Browser receives a web page
- Browser creates a model and stores it in memory -> document-html-head-body....
- browser shows the page on screen using a rendering engine
How could you write "Welcome" in Java script?
document.write('Welcome");
document is the object
dot is the member operator
and write() is the method this the sting as argument
How do you add JavaScript to a page?
The code in your web document is generally loaded and executed in the order it appears on the page. if JS loads and tries to run before the HTML and CSS it is affecting has been loaded, errors can occur
There are three main ways:
- Internal JS is ok, comes before </body>
- External JS - best
- inline JS handlers - NO, bad practice
are usually loaded or inserted inside the head
What are the most common rules when naming variables in java script?
- must begin with a letter, $ or _, must not start with a number
- name can contain letters, numbers, $,_ must not use - or . in a variable name
- cannot use keywords or reserved words
- all variables are case sensitive.
- if name is made up of more than one word, use camel case
how do you declare a function in js?
function sayHello() {document.write('Hello');}
Describe the main feature of the browser object model in js
window.innerHeight
window.innerWidth
window.screenX
window.screenY
window.print()
- Window
- Document
- History
- Location
- Navigator
- Screen
Describe the document object model
document.title
document.lastModified
document.write()
document.getElementById()
- document
- html
- head
- title
- body
- div
- head
- html
how do you use comparison operators in js?
- == compares two values to see if they are the same
- != compares two values to see if they are not the same
- === is preferable to == as it compares two values to check both the data type and the value are same
- !== is preferable to != as it compares two values to check both the data type and the value are not same
What is an anonymous function in js?
a function without a name. used for code that only needs to run once within a task, rather than repeatedly being called by other parts of the script.
can also be used as a function expression and stored in a variable or immediately invoked function jus start with (function...)
setTimeout(function() {
console.log('execute later after 1 second')
},1000);