Before coding, we need to decide which sections of the website should
incorporate images and which can be coded. Let’s use Photoshop’s Slice tool (hidden under the Crop tool submenu) and section off areas like the burrito photo, and Joan’s tacos.
Now, we need to Export our slices — Go to File > Save for Web (Alt+Shift+Ctrl+S). When a particular slice is selected, you can set its Export options on the right side of the window (JPG, PNG, etc.). If you double-click on a specific slice, you will see the Slice Options window pop up — this allows you to name specific slice files.
By default, all images are placed in: subdirectory/images/. If you want to export only the slices you’ve created, then select All User Slices in the Save window.
The images we exported will be embedded into our HTML document using the![]()
<img> tag.
Line 1: Declares that the HTML 5 dialect is the document language.
Line 2: <html> element represents the root of an HTML document. This is an obligatory container that marks the borders of our document.
Line 3: <head> section contains invisible page elements like the meta information, title, etc.
Line 4: <meta charset=”utf-8″> This is the declaration of document encoding — utf-8 is a secure choice — you can learn more about HTML character encodings here.
Line 5: <title>Sample page</title> This is the page title which is visible in the browser title bar.
Line 6: </head> closes the <head> tag from Line 3.
Line 7: <body></body> This body element will contain all the visible content of the page.
Line 8: </html> closes the <html> tag from Line 2. This element marks the end of the document.
There are other possible ways to code the same design. We will use HTML 5 semantic tags (header, nav, article, footer) to create a basic document structure:
This is the layout translated to HTML:
A few things to note :
Line 9: <img src=”"/>![]()
This is an src attribute which contains a path to the image file.
Line 11 and 12: <a> elements are the essence of the Internet as they are used to create hyperlinks. They’re paired with the HREF attribute, and should link a target URL.
Lines 18 to 20: These are a few text formatting tags: <h1> stands for a first level header; <p> stands for a paragraph; <br> stands for a line break.
When you open just the HTML file in a web browser, you’ll see it’s not formatted like our design from earlier. This is because the HTML code is not enough — we need to format it with Cascading Style Sheets (CSS). CSS is a stylesheet language that’s used to format HTML elements.
But why, exactly, do we need to pair HTML with CCS? Some time ago, formatting was achieved by adding attributes to HTML tags. However, this led to an unreadable and unmaintainable code. The solution was to separate document content (HTML) from document formatting (CSS).
Let’s breakdown a simple CSS rule: .
Selector: This is the HTML element you want to style. For example: <article>
Declaration: A CSS rule can have 1 or more declarations. Each declaration consists of a property and value, and is separated by a semicolon. You place declarations between curly brackets { }.
Property: This is the style characteristic you want to change. For example: background color, font size, etc.
Value: Each property has a value associated with it. For example: #ffcc11 (for background color), 16px (for font size), etc.
There are a ton of CSS properties that can be set for each HTML element, but it’s not necessary to write them all yourself. You can rely on your browser’s default settings, or use a base stylesheet that resets your browser to reasonable values. It actually requires quite a bit of knowledge and experience to write selectors on your own.
Let’s take a look at some of the CSS rules necessary to format our simple design.
CSS Positioning Properties: There are 4 different methods (static, fixed, relative and absolute) that allow us to position specific elements in our design. After you set one of these methods, you can position elements using the top, right, bottom and left properties — these will work differently depending on which of the 4 methods you use. In this case, we’d like to position the plate_image using an absolute positioning.
CSS Box Model: This model is a box that wraps around all HTML elements — it includes margins, borders, padding and the content. Margins are an invisible area around the border, and padding is between the border and content.
Now, we need to Export our slices — Go to File > Save for Web (Alt+Shift+Ctrl+S). When a particular slice is selected, you can set its Export options on the right side of the window (JPG, PNG, etc.). If you double-click on a specific slice, you will see the Slice Options window pop up — this allows you to name specific slice files.
By default, all images are placed in: subdirectory/images/. If you want to export only the slices you’ve created, then select All User Slices in the Save window.
The images we exported will be embedded into our HTML document using the
Creating a basic HTML document
We have our slices, let’s create a basic HTML document.Line 1: Declares that the HTML 5 dialect is the document language.
Line 2: <html> element represents the root of an HTML document. This is an obligatory container that marks the borders of our document.
Line 3: <head> section contains invisible page elements like the meta information, title, etc.
Line 4: <meta charset=”utf-8″> This is the declaration of document encoding — utf-8 is a secure choice — you can learn more about HTML character encodings here.
Line 5: <title>Sample page</title> This is the page title which is visible in the browser title bar.
Line 6: </head> closes the <head> tag from Line 3.
Line 7: <body></body> This body element will contain all the visible content of the page.
Line 8: </html> closes the <html> tag from Line 2. This element marks the end of the document.
There are other possible ways to code the same design. We will use HTML 5 semantic tags (header, nav, article, footer) to create a basic document structure:
This is the layout translated to HTML:
A few things to note :
Line 9: <img src=”"/>
Line 11 and 12: <a> elements are the essence of the Internet as they are used to create hyperlinks. They’re paired with the HREF attribute, and should link a target URL.
Lines 18 to 20: These are a few text formatting tags: <h1> stands for a first level header; <p> stands for a paragraph; <br> stands for a line break.
Format with Cascading Style Sheets (CSS)
When you open just the HTML file in a web browser, you’ll see it’s not formatted like our design from earlier. This is because the HTML code is not enough — we need to format it with Cascading Style Sheets (CSS). CSS is a stylesheet language that’s used to format HTML elements.
But why, exactly, do we need to pair HTML with CCS? Some time ago, formatting was achieved by adding attributes to HTML tags. However, this led to an unreadable and unmaintainable code. The solution was to separate document content (HTML) from document formatting (CSS).
Let’s breakdown a simple CSS rule: .
Selector: This is the HTML element you want to style. For example: <article>
Declaration: A CSS rule can have 1 or more declarations. Each declaration consists of a property and value, and is separated by a semicolon. You place declarations between curly brackets { }.
Property: This is the style characteristic you want to change. For example: background color, font size, etc.
Value: Each property has a value associated with it. For example: #ffcc11 (for background color), 16px (for font size), etc.
There are a ton of CSS properties that can be set for each HTML element, but it’s not necessary to write them all yourself. You can rely on your browser’s default settings, or use a base stylesheet that resets your browser to reasonable values. It actually requires quite a bit of knowledge and experience to write selectors on your own.
Let’s take a look at some of the CSS rules necessary to format our simple design.
CSS Positioning Properties: There are 4 different methods (static, fixed, relative and absolute) that allow us to position specific elements in our design. After you set one of these methods, you can position elements using the top, right, bottom and left properties — these will work differently depending on which of the 4 methods you use. In this case, we’d like to position the plate_image using an absolute positioning.
CSS Box Model: This model is a box that wraps around all HTML elements — it includes margins, borders, padding and the content. Margins are an invisible area around the border, and padding is between the border and content.
No comments:
Post a Comment