Difference between revisions of "Web-site-notes"
(→About CSS) |
(→About CSS) |
||
| Line 25: | Line 25: | ||
The simplest way to use CSS is just to assign styles to html tags, like this example for heading 1 tags. | The simplest way to use CSS is just to assign styles to html tags, like this example for heading 1 tags. | ||
| − | h1 { | + | <code>h1 { |
color:green; | color:green; | ||
text-decoration: underline overline; | text-decoration: underline overline; | ||
} | } | ||
| + | </code> | ||
====Viewport==== | ====Viewport==== | ||
Revision as of 19:33, 19 June 2021
This is stuff about my web site, www.edburdick.net
Contents
This Wiki
This wiki is part of my edburdick.net web site. These pages are notes about new learnings and interesting challenges I have run across in building and maintaining the site.
My photo pages
The vast majority of the space used on www.edburdick.net is photos and a few videos. Most of the photo albums are created using jAlbum, a great program (free with small ads on your albums, $39 one-time charge for basic license with no ads) for creating web-based photo albums. jAlbum has a "skinnable" user interface, meaning that a wide variety of different album layouts and capabilities can be designed and implemented by users. Some of the skins require a modest license fee, but most are free. I used a skin called Matrix for a long time because it creates the illusion when you click on a thumbnail that the thumbnail just expands to fill the screen with your photo, and then allows you to easily start a slide show or go to the next or previous photo. But more lately, with all of the small screen devices like smartphones and tablets, I spent some time searching for skins that do well with the "swiping" type user interface. I ended up with Turtle, maybe the oldest skin, but which has kept up very well.
Before using jAlbum, I wrote my own software to general my albums from text files, but jAlbum with skins makes much nicer albums in much less time. Click here to see my photo site.
Making things responsive
Things have changed since I started all of this. Because most web browsing these days is done with phones, my pages are out of step with screen sizes, so it is time to do something about it. The other big change is the progress made with CSS ("Cascading Style Sheets",) including ways of modifying content to be displayed differently on different devices and even on landscape vs portrait orientations.
Learning CSS
I have used CSS for style stuff like text fonts and sizes, etc, but I have not used the stuff for making my pages responsive. As I learn stuff, I am recording it here, just to have a place to keep notes for myself. Maybe others can benefit from it.
About CSS
CSS, an acronym for Cascading Style Sheets, is a formal way to set styles, like colors, fonts, and the part I am trying to learn about, page layout. It is not HTML or JAVASCRIPT, but is a separate language, quite a bit different from other web languages, which I find a bit annoying, but so be it. Based on what I know at this point, you define "classes" in CSS, and use them in the other code on the page. Each class defines style stuff, like text size and color, and layout. Then you can write some code in HTML and assign a class to it so that it will be formatted based on that class's style. The CSS code is surrounded by the <style> and </style> tags, and this block is inside of the <head> </head> tags. You can also use one CSS block for multiple pages by putting it in a separate file and linking to it like this...<link rel="stylesheet" href="mystyle.css">, also inside of the <head> </head> block. The CSS file, mystyle.css in this example, is just CSS code without the <style> </style> tags. You can also build up a style by including css files in other css files using something like this: @import "mystyle2.css";
The simplest way to use CSS is just to assign styles to html tags, like this example for heading 1 tags.
h1 {
color:green;
text-decoration: underline overline;
}
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Adding this to the CSS section provides a way for other CSS code to find out how wide the screen of the client device is.
