Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community
Ask the community for help and clear up your study doubts
University Rankings
Discover the best universities in your country according to Docsity users
Free resources
Our save-the-student-ebooks!
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
Understanding HTML and CSS: Accessing and Implementing Stylesheets, Study Guides, Projects, Research of Design
User Interface DesignHTML and CSSWeb DesignFront-end Development
An overview of how HTML files access and implement CSS stylesheets. It covers the use of In-line, Internal, and External stylesheets, as well as the advantages and disadvantages of each implementation style. It also discusses the importance of scripting languages in enhancing the functionality of web pages.
What you will learn
- What are the advantages and disadvantages of Internal CSS?
- What are the different ways HTML files can access CSS stylesheets?
- What are the advantages and disadvantages of Inline CSS?
- How can scripting languages improve the functionality of web pages?
- What is the difference between In-line, Internal, and External CSS?
Typology: Study Guides, Projects, Research
2021/2022
1 / 17
Related documents
Partial preview of the text
Download Understanding HTML and CSS: Accessing and Implementing Stylesheets and more Study Guides, Projects, Research Design in PDF only on Docsity! Course: BTEC IT Extended Diploma, Level 3 (Software Development) – Year 1 (F1215) Name: Richard Collins 164166 Unit: 20 – Client Side Customisation of Web Pages Tutor: Rachid Bekhechi Assignment: Assignment 1 Started: 19th October 2016 (19-10-16) Submission: 25th November 2016 (25-11-16) Criteria Name Pages P1 Explain how HTML files access CSS PP – 4 - 6 P2 Explain the features of the box model for CSS Doc – 13 P3 Assess different implementation styles of CSS Doc – 14 M1 Explain the fundamentals of a scripting language PP – 7 - 12 M2 Discuss how a scripting language can improve functionality Doc – 15 D1 Explore how web pages using scripts are implemented in different browsers Doc – 16 - 17 This Assignment is presented over 2 different types of documentation. PP = PowerPoint Presentation Doc = Word Document 1 Unit 20 Assignment 1 Task 1 (P1 & M1) Richard Collins - 164166 2 P1 - How HTML files access CSS External CSS style sheet is when a second document is created and linked with the HTML document. This means that the content of the page is on the .HTML Document and the styling is on a second .CSS Document Example: HTML: <head> <link rel=“stylesheet” type=“text/css” href=“IndexStyle.css”> </head> This is the code which links the HTML document to the CSS Document. The CSS Document would then state the desired styles which the user would want. Example: CSS: Body { background-color: green; Font-family: Calibri; Color: black; } This is an example of the code which would be present on the CSS Style sheet. This document would need to be the exact same name as the one stated in the “href” part of the HTML code and be in the same location as the HTML Document is saved in. For our example this is “IndexStyle.css”. If the name is not the same or they are not in the same location, then they will not link and no styling will be applied to the HTML Document when it loads. External CSS 5 P1 - How HTML files access CSS External CSS style sheet can also be imported into the HTML Document along with the main CSS Style sheet, this will apply both of the formatting and styles to the HTML Document. Example: HTML: <style> @import url (“IndexImport.css”) ; </style> This will apply the first style of the first CSS Sheet “IndexStyle.css” and also import the style of the “IndexImport.css” to the document as well. These documents have to have styling for different things, otherwise they will clash and only the main CSS File will be applied. You can also import from one CSS Document to another by using the same tag. This will bring the stylings from the second sheet, the one which you wish to import and apply it along with the first CSS Sheet to the HTML Website when loaded. Example: 1st sheet CSS: @import url (“IndexImport.css”) h1 { background-color: green; Font-family: Calibri; Color: black; } Import CSS 2nd sheet CSS: Body { Color: green; Font-family: Calibri; Color: black; } 6 M1 – Implementation Styles for CSS In this part of the presentation document, I am going to asses the different implementations for CSS. There are 3 different styles I am going to discuss in this section; Internal, External and Inline style sheets. CSS is used by web developers to set and use different styles for webpages. The CSS features no content at all that is featured on the webpage, the only thing the CSS does is to style the HTML Document when it is loaded in a browser. The CSS will identify each individual tag that is defined in the HTML Document and apply the styling which has been set in the CSS coding to those specific tags. Each type of Implementation of CSS has its advantages and disadvantages, in the following slide, I will discuss these in more detail. 7 Introduction M1 – Implementation Styles for CSS External CSS is written in a secondary document which is then linked to the main HTML document, this then applies it when loaded in a browser. Example: <link rel=“stylesheet” type “text/css” href=“Example.css”> - This is what is in the HTML document. Body { Background-color: green; } - This is what is in the CSS document. 10 External Advantages: Reduced Sizing With the HTML and the CSS being in separate files, this means that the files are smaller than if they were together. This means for better loading and downloading for the browser. Ease to Work with External CSS effects the entire page when used, meaning that it is easier to code for the page and means for less coding needed. This also can be helpful for searching for errors in the CSS code, as it is all contained in one document separate from the HTML. Re-use coding Because of the coding for CSS being all in one document, the ability to re-use coding from one section to another is easy with simple copy and pasting. Disadvantages: Upload With External CSS, you have to upload the CSS file as well as the HTML files for each of the pages you are using. So if a website has 3 pages, it will have a total of 6 documents, 1 HTML and 1 CSS for each. This can take time if you are trying to bring your website online and live to the internet. Time Consuming Since you are linking the HTML tags to the CSS tags in the CSS file, you have to be very careful not to apply the wrong style to the wrong tag. This can be easily done by a simple misspelling or typo. Download Time Since there are multiple files for each, it can mean the download/response time can be longer than other CSS types. This is because the browser is downloading 2 files at a time, the HTML and the CSS. M1 – Implementation Styles for CSS 11 HTML Link Advantages: One File Each The HTML file is a single file and the CSS file is also a single file, there are no more files needed to run the basic webpage and have it styled as needed. Ease to Work with Since there are only 2 documents, making any changes are easy to anyone who understands the basics of HTML coding and knows the CSS counterpart of the HTML document. Application of CSS Since the Link tag is relatively easy to know and remember, it is not difficult to apply it to the HTML document which is being edited. This also means that the CSS file can be changed entirely, as long as it is replaced by a file with the exact same name. Disadvantages: There are not many disadvantages to the HTML linking of CSS style sheets but one thing which is considered a disadvantaged and that is due to size of the website.. If you was to use the HTML Link of CSS on very large websites then it would cause issues. Having the same style throughout the entire website would be very messy and look incredibly unprofessional. This is why they would be sure to use different CSS implementations. M1 – Implementation Styles for CSS CSS Import is when there are multiple CSS files which need to be applied to the same page, so you import one file into another CSS file and then apply it to the HTML Document. This is linked in both documents to link them together. Example: <style> @import url (”CSSSheet.css”); </style> 12 CSS Import Advantages: Multiple Files There are multiple files for the styling from the CSS. This means that the main CSS file can be applied to many of the attributes but then more can be added by a secondary CSS file and then linked into the first sheet via the @Import, which is again linked into the HTML document using the @Import again. Separate style There are different styles applied with different CSS files which are imported from a second CSS file. These can be applied to anywhere throughout a page and can be different on each. Disadvantages: Multiple Files While this can be an advantage, it can also be a big disadvantage at the same time. This means that the CSS used is over multiple files depending on how many used, so it may not always be easy to find and make changes if necessary to the CSS. I am Richard I am so smart I AM SO SMART! 15| P a g e M2 How Scripting Languages Improve Functionality. This all depends on how you look at the websites you are creating. Any website which is heavy on content or has bulky amount of coding, will take longer to load and render or if the PC/Internet connection is slow, this will also need to be taken into account. When looking at JavaScript, we see the ability it has to work with and interact with HTML coding. This enables the developers who use JavaScript with their HTML to create a website which is more appealing and interactive with the user. JavaScript is used by a ton of companies around the world and many of them have gone on to endorse JavaScript for others to use. This is mainly due to its open source licencing, which means that a user does not have to obtain any special permissions or licences from any company to use JavaScript, it is open for usage by anyone for any purpose. Now there are two different ways scripting languages work, mainly I am going to be looking at Front-end scripting than the Back-end counterpart. Front-end is used the same as Back-end, they work together in tandem. Front-end is where the user is working directly with the scripting, where it is being done on the client’s side and is visibly seen by the user. This is very different from the back- end scripting, as this does all the constructing of a page and processing on the server side, as defined “at the back of it all”. With front-end scripting, the browser understands the code within the files, such as the HTML, CSS or JavaScript, whereas a server cannot understand any of these files, which is why back-end scripting is done mostly in PHP. Since browsers can understand these files, it can execute them, unlike the server, and all of this is done on the user’s computer and not on the server where the website is hosted. The most commonly used front-end language is JavaScript, which is in-bedded in most, if not all websites. This means that users on a daily basis are using JavaScript but don’t always know it. Due to the high intensity of websites and the demands of the public, JavaScript is more and more relied upon for more and more parts of a webpage, as it creates an important and enjoyable experience on a webpage for the user and general public. One of the biggest and most common uses of JavaScript as a scripting language, is its integral part of online forms and how it is used in collecting information and data from the user. This is because that when a user enters information into a website, it is sent back via secure methods to the server, JavaScript uses this to obtain anything which is external and uses it for Analytics. However, this will not retain any “useless” information which is not relevant for the developer or for keeping the website running, such as user clicks, mouse movements etc. 16| P a g e D1 How Scripting Languages Are Implemented in Different Browsers. This all depends on a few criteria. Firstly, not all browsers are the same, so they will all have their own unique way they display and format when following a scripting language, such as JavaScript. Because of how different some of these browsers are, it is considered good practice as a web developer to test your coding on all mainstream web browsers, to ensure that it works and meets to a standard acceptable by yourself and anyone else involved in the creation of the website. Now we are looking at how a scripting language such as JavaScript knows which browser the user is running. This is what is known as Browser Detection and this is a piece of code included into all scripting languages when used with websites. Now due to the differences in browsers, a web developer may have to make alterations to his/her code to ensure it works with, not only the browser detection, but also the website in general. This most common example is mobile devices. On a mobile device, the website needs a completely different set of coding, compared to it being run normally on a computer browser. This coding needs to ensure that it makes the screen smaller, ensures pop-ups to be compatible with touch screen (to be able to close them). The process in which the code detects the browser is what makes this possible, as it selects from its own database of coding, the correct code for the current browser the user is currently visiting the website on. In my images, I am testing the JavaScript pop-up boxes within the browsers of Chrome and Internet Explorer 11. From these images, we can see the differences in how the messages have been generated to match with their browsers look. In the chrome browser, the pop- up is part of the browser and appears in sync with everything whereas the Internet Explorer 11 browser has given a message box which is commonly seen with Visual Basic programs, which is standard for Microsoft Programs, but it is not as in sync as the chrome version. These are all different due to each browser being programmed differently from every other browser, so any scripts which are included in the code and on the client side, will be shown differently on each individual’s computer web browser. Any scripts which are not client-side will appear the same throughout however, as these do not load on the client’s machine but instead on the host server where the website is uploaded and distributed from. 17| P a g e here is an example of code, which should tell any/all browsers to detect which browser the user is using and set the correct version for that browser. (this is a snippet from the code view, as it is impossible to get a snippet from design view) CSS Sheets for Each Browser Since all browsers work differently, it means they each need their own CSS sheet to be able to style them each correctly. If the same sheet was applied universally across all browsers, the website once loaded would look very different and may not meet the desired specification set by the web developer. By creating different CSS Sheets for different browsers, web developers can avoid browsers from messing up their website by using a design sheet specified for alternative browsers by providing the alternate style sheets which make websites more compatible for the intended browsers. Object Detection There is an alternative way for a website to detect which browser it is being loaded onto, and the version of the browser that the user is running. This works by detecting the browser as normal and then adding code as needed to make it compatible with the browser the user is running. This can help to make the website work properly, as it was designed in an alternate browser, but in the browser that the user is using. By using and looking at the scripting language, it will detect what is needed and what will work with that browser and adjust it accordingly. The object detection code looks something like this:
Copyright © 2024 Ladybird Srl - Via Leonardo da Vinci 16, 10126, Torino, Italy - VAT 10816460017 - All rights reserved