Html: Difference between revisions

From 太極
Jump to navigation Jump to search
(Created page with "= Some useful html tags = * label: http://www.w3schools.com/tags/tag_label.asp = PHP =")
 
 
(238 intermediate revisions by the same user not shown)
Line 1: Line 1:
= Some useful html tags =
= Some useful HTML tags about form =
* label: http://www.w3schools.com/tags/tag_label.asp
http://www.w3schools.com/html/html_forms.asp


== [http://www.w3schools.com/tags/tag_form.asp form] ==
<pre>
<form action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</pre>
== radio button [http://www.w3schools.com/tags/tag_label.asp label] and [http://www.w3schools.com/tags/tag_input.asp input] ==
<pre>
<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>
</pre>
== dropdown list [http://www.w3schools.com/tags/tag_select.asp select] and [http://www.w3schools.com/tags/tag_option.asp option] ==
<pre>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</pre>
[https://www.johannesbgruber.eu/post/2021-07-28-let-users-choose-which-plot-you-want-to-show Let users choose which plot you want to show]
== [http://www.w3schools.com/tags/att_input_type.asp Upload file] using [http://www.w3schools.com/tags/att_input_type.asp input] ==
<pre>
<form action="demo_form.asp">
  Select a file: <input type="file" name="img">
  <input type="submit">
</form>
</pre>
== map ==
[https://www.w3schools.com/tags/tag_map.asp HTML <map> Tag]
== [http://www.w3schools.com/tags/tag_div.asp div] ==
<syntaxhighlight lang='html'>
<div style="color:#0000FF">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>
</syntaxhighlight>
=== tabs ===
[https://www.w3schools.com/howto/howto_js_full_page_tabs.asp Full Page Tabs]. Make sure to include a big div to wrap individual divs (tabs).
== id attribute ==
https://www.w3schools.com/hTML/html_id.asp
<syntaxhighlight lang='html'>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
<h1 id="myHeader">My Header</h1>
</syntaxhighlight>
== CSS and JS ==
[https://medium.com/better-programming/link-css-and-js-files-with-html-file-f848d00b42e8 Link CSS and Js Files With an HTML File]
* To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag
* To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn’t matter.
== Section tag, outline, layout ==
* https://www.w3schools.com/TAgs/tag_section.asp
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
* [https://stackoverflow.com/a/6941170 <nowiki>What is the difference between <section> and <div>? </nowiki>]
* [https://www.w3schools.com/html/html_layout.asp HTML Layout Elements]
* How to view the structural outline of a website with the HTML Outliner
** [[#HTML_5_outliner|HTML5 Outliner]] extension.
** https://gsnedders.html5.org/outliner/


= PHP =
= PHP =
== Simple examples ==
mywebpage.php
<pre>
<?php
echo "Today is " . date('Y-m-d H:i:s');
</pre>
== Differences between a standard HTML doc and a PHP doc ==
* PHP scripts should be saved with the .php file extension.
* You place PHP code within '''<?php''' and '''?>''' tags, normally withink the context of some HTML.
* PHP is a server-side technology. So PHP scripts must be run on a PHP-enabled Web server. This means that PHP must be run through a URL (i.e. http://yourdomain/mypage.php).
If the php source code is
<syntaxhighlight lang='php'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<?php
# This script does nothing much.
echo '<p>This is a line of text.<br />This is another line of text.</p>';
/*
echo 'This line will not be executed.';
*/
echo "<p>Now I'm done.</p>"; // End of PHP code.
?>
</body>
</html>
</syntaxhighlight>
then when we view the page source from a web browser, it will look like
<syntaxhighlight lang='php'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<p>This is a line of text.<br />This is another line of text.</p><p>Now I'm done.</p>
</body>
</html>
</syntaxhighlight>
== Resource ==
* [http://www.amazon.com/Learning-MySQL-JavaScript-Step---Step/dp/1449319262/ref=sr_1_1?s=books&ie=UTF8&qid=1353525357&sr=1-1&keywords=php Learning PHP, MySQL, JavaScript, and CSS]
* [http://www.amazon.com/PHP-Solutions-Dynamic-Design-Made/dp/1430232498/ref=sr_1_2?s=books&ie=UTF8&qid=1353525357&sr=1-2&keywords=php PHP Solutions: Dynamic Web Design Made Easy]
* [http://www.cyberciti.biz/faq/centos-rhel-6-install-suhosin-php-advanced-protection-system/ Suhosin PHP Advanced Protection System]
== Debugging techniques ==
* Run PHP scripts through a URL; i.e. it must be requested through '''http'''://something.
* Know what version of PHP you're running; run phpinfo.php to confirm.
* Make sure display_errors is on. This is related to PHP configuration setting.
* CHeck the HTML source code.
* Trust the error message.
== Quick sheet ==
* print_r($_SERVER); print 'ABCD';
* Use /* and */ for comments
* Variables are case-sensitive!
* Constants define('PI', 3.14);
* Strings: "Hello, $first_name", "I said \"How are you?\"". Note that backslash is used to  escape the quotation.
* Arrays can be used by using either '''indexed''' array or '''associative''' array. For indexed arrays, the key is 0,1,2,3,... and for associative arrays, the key is a string. For example, $name[0]='Don' and $state['VT'] = 'Vermont'.
* Single quotation marks are treated literally; items within double quotation marks are extrapolated. This means that within double quotation marks, a variable's name is replaced with its value, but the same is not true for single quotation marks.
* XHTML are different from HTML
** the code needs to be in all lowercase letters
** every tag attribute must be enclosed in quotes
** For example, <INPUT TYPE=TEXT NAME=address SIZE=40> in HTML becomes <input text="text" name="address" size="40"> in XHTML
* For avoiding security problems in form, use PHP functions like htmlspecialchars(), htmlentities(), strip_tags().
** htmlspecialchars() converts certain HTMLM tags into their entity versions. The entity version appears in the output but isn't rendered.
** htmlentities() turns all HTML tags into their entity versions.
** strip_tags() removes all HTML and PHP tags.
* foreach() {}
* abcd
== PHP, form and POST method ==
{| style="background:#cccc99;color:black;width:80%;" border="1"
|+ PHP form handling
!# !! index.php !! welcome.php
|- style="background:white; color:black"
! 1.
| <pre>
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
</body>
</html>
</pre>
| <pre>
<html>
<body>
Welcome <?php echo $_POST["fname"]; ?>!<br />
You are <?php echo $_POST["age"]; ?> years old.
</body>
</html>
</pre>
|}
The 'action' attribute in <form> defines an absolute or a relative URL. That is, the action could be pointing to an asp, cgi page or something like "mailto:[email protected]".
== PHP, form and GET method ==
{| border="1"
|+ GET method
! index.php
! welcome.php
|-
|
<pre>
<form action="welcome.php" method="get">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
</pre>
|
<pre>
Welcome <?php echo $_GET["fname"]; ?>.<br />
You are <?php echo $_GET["age"]; ?> years old!
</pre>
|}
GET, the default, will send the form input in an URL, whereas POST sends it in the body of the submission. The latter method means you can send larger amounts of data, and that the URL of the form results doesn't show the encoded form.
== MySQL basic operations ==
* Log into root
<pre>
$ mysql -u root -h myserver-sever.com -p
</pre>
* Create a new mysql database called demo
<pre>
mysql> CREATE DATABASE demo;
</pre>
* create a new user and GRANT (add) privileges to a newly created user on all tables in the demo database.
<pre>
CREATE USER 'user1'@'localhost' IDENTIFIED BY 'mypassword';
GRANT ALL ON demo.* TO 'user1'@'localhost';
</pre>
OR
<pre>
mysql> GRANT ALL ON demo.* TO user1@localhost IDENTIFIED BY 'mypassword';
</pre>
* How to connect to the demo database on local/remote MySQL server?
<pre>
$ mysql -u user1 -h mysql.server.com -p demo
</pre>
* To remove an account
<pre>
DROP USER 'user1'@'localhost'
</pre>
* Create a table on the demo database
<pre>
mysql> USE demo;
mysql> DROP TABLE Employee;
mysql> CREATE TABLE Employee (
    ->    Name VARCHAR(50),
    ->    Phone VARCHAR(15)
    -> );
Query OK, 0 rows affected (0.21 sec)
mysql> Show tables;
mysql> Describe Employee;
+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| Name  | varchar(50) | YES  |    | NULL    |      |
| Phone | varchar(15) | YES  |    | NULL    |      |
+-------+-------------+------+-----+---------+-------+
2 rows in set (0.03 sec)
mysql> INSERT INTO Employee (Name, Phone) VALUES ('Joe Wang', '666 2323');
Query OK, 1 row affected (0.04 sec)
mysql> INSERT INTO Employee (Name) VALUES ('John Doe');
Query OK, 1 row affected (0.02 sec)
mysql> INSERT INTO Employee (Name, Phone) VALUES ('John Doe', NULL);
Query OK, 1 row affected (0.01 sec)
mysql> Select * from Employee;
+----------+----------+
| Name    | Phone    |
+----------+----------+
| Joe Wang  | 666 2323 |
| John Doe | NULL    |
| John Doe | NULL    |
+----------+----------+
</pre>
== Username/password ==
# http://taichi.selfip.net:81/lang/php/w3/login/login.php
== File upload ==
Need to change the folder permission/property. See [http://stackoverflow.com/questions/14116708/adding-apache-to-a-user-group-file-upload-permission here].
* chmod -R 777 FOLDERNAME
* sudo usermod www-data --apend --groups GROUPNAME
where GROUPNAME is the group name of the folder and www-data is the user that runs the web server.
* sudo chown -R .www-data FOLDERNAME
where the dot means no change for the owner's name. We just change the group name. It is also helpful to do chmod -R 775 FOLDERNAME.
* just edit /etc/group file. See the link above.
Examples:
# http://taichi.selfip.net:81/lang/php/w3/uploadphp/
# http://taichi.selfip.net:81/lang/php/xqto/index.php
== Login/out + File upload ==
The following test page combines the ideas of login/out and file upload.
# http://taichi.selfip.net:81/lang/php/w3/loginuploadphp/loginupload.php
== PHP and database ==
== Books ==
http://www.amazon.com/Head-First-MySQL-Lynn-Beighley/dp/0596006306/ref=tmm_pap_title_0?ie=UTF8&qid=1360359135&sr=8-2
== Modules ==
* [https://www.tecmint.com/list-php-modules-in-linux/ How to List Compiled and Installed PHP Modules in Linux]
:<pre>sudo dpkg --get-selections | grep -i php</pre>
* [https://www.digitalocean.com/community/questions/how-to-install-php-modules How to install PHP modules] For example '''aptitude install php-mbstring'''
= CSS =
* http://www.w3schools.com/css/default.asp
* [http://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189/ref=pd_bxgy_b_img_z HTML and CSS: Design and Build Websites]
* [http://learn.shayhowe.com/html-css beginner] and [http://learn.shayhowe.com/advanced-html-css/ advanced] Designer/developer Shay Howe put together a set of free lessons.
* [http://channel9.msdn.com/Series/HTML5-CSS3-Fundamentals-Development-for-Absolute-Beginners channel9.msdn.com]
== Three Styles ==
# Store an exteranl style sheet in a separate file
# Embed an internal style sheet inside an HTML document (inside the <nowiki><head></nowiki> section your page).
# Inline style
== Anatomy of a Rule ==
selector { property: value }
Example:
<pre>
  h1 { text-align: center;
      color: blue }
</pre>
== [https://en.wikipedia.org/wiki/Web_colors Web colors] ==
Normally hex form requires 6 digits but the short form only requires 3 digits. For example, #09C is the same as #0099CC.
(Outdated) Google chrome devtools provides a color magnifier which can be used to identify the color code of a specific pixel on the screen. [https://stackoverflow.com/questions/28716775/how-to-use-color-picker-eye-dropper Here] is a gif showing the process to get the color picker.
# Open devtools
# Right click on a website and choose 'inspect'
# Click somewhere having class. The style definition will be shown in a small panel
# If color was used somewhere, there should be a small square showing the defined color. Click the square.
# Now if we move the cursor to the website, a magnifier will be shown up
* '''Color Picker''' or '''Eyedropper''' from Chrome-DevTools [https://developers.google.com/web/tools/chrome-devtools/css/reference CSS Reference]
* [https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg ColorPick Eyedropper] extension works well. 2020
== Important Tools ==
http://www.lifehack.org/314802/10-best-tools-optimize-and-audit-css-code
* Notepad++ -  color coded formatting
* [http://www.skybound.ca/ Stylizer] - CSS editor with preview and has 8 built-in browsers
* [http://www.blueprintcss.org/ Blueprint] - CSS framework
* [http://tools.maxcdn.com/procssor/ ProCSSor] - cleans and organizes your css the way you want it
* [http://csscompressor.com/ CSS Compressor] - reducing the size of your CSS code and helping your website to load much faster as a result
== Simple example ==
<pre>
<style>
body
{
    background-color:#d0e4fe;
}
h1
{
    color:orange;
    text-align:center;
}
p
{
    font-family:"Times New Roman";
    font-size:20px;
}
</style>
</pre>
To insert a CSS in an html file, use
<pre>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</pre>
== href ==
* [https://stackoverflow.com/a/10659501 Starting with a forward slash in html for "href"]. One is a '''relative path''' and one an absolute path. So you don't need to use something like "../../page.html".
* [https://stackoverflow.com/a/7612930 hyperlink who's path is only a forward slash (/)]
== Links/Anchor ==
[https://www.w3schools.com/Css/css_link.asp CSS Links]
<syntaxhighlight lang='html'>
a {
  color: hotpink;
}
</syntaxhighlight>
== Margin vs padding ==
* http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html
* http://www.w3schools.com/css/css_boxmodel.asp
== Add vertical space ==
https://stackoverflow.com/a/9141084
== What’s the difference between comma separated identifiers and space separated? ==
* http://stackoverflow.com/questions/6670360/space-separated-things-in-css
* http://community.sitepoint.com/t/whats-the-difference-between-comma-separated-identifiers-and-space-separated/6309/2
== Overlapping elements ==
CSS position -> overlapping elements
== Float an image ==
CSS floating -> How Elements Float
== Text in Transparent Box ==
CSS Image Opacity
== @media, @keyframes, @-webkit-keyframes ...==
[https://www.w3schools.com/cssref/css3_pr_mediaquery.asp CSS Reference]
== Tile style ==
* [https://stackoverflow.com/a/11391063 Tile layout with CSS and HTML]
* [https://www.digitalocean.com/community/tutorials/how-to-build-a-tiled-layout-with-css-section-3 How To Build a Tiled Layout With CSS (Section 3)]
= Javascript =
== Collapsibles/Accordion ==
[https://www.w3schools.com/howto/howto_js_accordion.asp How TO - Collapsibles/Accordion]
== Search box ==
* [https://youtu.be/ZFUOC-y4i0s JavaScript Project | Create Product Search Engine/Bar/Filter in JavaScript]
* [https://www.wikihow.com/Add-a-Google-Search-Bar-to-Your-Website How to Add a Google Search Bar to Your Website]
* [https://www.ionos.com/digitalguide/websites/website-creation/how-to-create-a-search-engine-for-your-website/ How to set up a website search engine]
* PHP and possibly MySQL
** [https://heytuts.com/web-dev/php/simple-search-engine-in-php Make a Simple Search Engine with PHP (open source download)] and MySQL.
** [http://www.learningaboutelectronics.com/How-to-create-own-search-engine-for-website-using-PHP.php How to Create Your Own Search Engine For Your Website]
** [https://www.sourcecodester.com/tutorials/php/12632/php-simple-search-box.html Creating a Simple Search Box using PHP]
** [https://www.studentstutorial.com/php/php-search.php How to create search option or feature using PHP]
* [https://www.w3schools.com/PHP/php_ajax_livesearch.asp AJAX Live Search]
= jQuery =
* [http://www.amazon.com/JavaScript-jQuery-The-Missing-Manual/dp/1449399029/ref=pd_bxgy_b_text_y Javascript & jQuery: The Missing Manual]
* [http://docs.jquery.com/Main_Page jQuery main page (download 1.8.3, simple example)]
* [http://docs.jquery.com/Plugins/Authoring jQuery plugin]
* [http://docs.jquery.com/Tutorials Tutorial]
* [http://www.scotthorlbeck.com/code/tochecklist/ multiple selection without Ctrl key]
* [http://www.slideshare.net/Intertech/understanding-jquery Understand jQuery]
To use the javascript in the HTML code, we can grab the script from internet, local directory or defined in the html.
<pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
          effect: 'random'
    });
</script>
</pre>
== Image slider/carousel/lightbox/gallery ==
* [https://www.makeuseof.com/image-gallery-html-css-javascript/ How to Create a Simple Image Gallery Using HTML, CSS, and JavaScript]
* https://www.w3schools.com/howto/howto_js_slideshow.asp
* [http://nivo.dev7studios.com/ Nivo slider] Free to abuse.
* [http://highslide.com/ High slide] Non free for commerical/government use.
* [http://lokeshdhakar.com/projects/lightbox2/ Lightbox2] by Lokesh Dhakar. It needs to create a thumbnail version of all images.
** [https://youtu.be/IPVQeVlw2_E How to Create Photo Gallery Grid with Modal Window Lightbox]
** [https://youtu.be/C1B1Fx3XKOg How To Create Image Gallery In HTML, CSS and Javascript | Lightbox Gallery].
** http://www.dummies.com/web-design-development/site-development/how-to-create-an-image-viewer-with-lightbox2/
* http://ashleydw.github.io/lightbox/. It still needs to create a thumbnail version of all images.
It seems if we want to create lightbox image gallery, we need to create thumbnails first. We can skip creating thumbnail images if we don't need javascript and lightbox effect.
== Tree ==
* http://code.stephenmorley.org/javascript/collapsible-lists/
* http://code.google.com/p/dynatree/
* https://github.com/jzaefferer/jquery-treeview
* http://www.queness.com/post/1138/10-javascriptcss-treeview-and-sitemap-plugins-and-tutorials
= Responsive Design =
* [https://www.cloudsavvyit.com/1434/what-is-responsive-design-and-how-do-you-use-it/ What Is “Responsive Design,” And How Do You Use It?]
* [https://www.linuxuprising.com/2021/11/responsively-app-is-browser-for-faster.html Responsively App Is A Browser For Fast Responsive Web Development (Free And Open Source)]
* w3schools
** [https://www.w3schools.com/html/html_responsive.asp HTML Responsive Web Design and Viewport]
** [https://www.w3schools.com/howto/howto_js_mobile_navbar.asp How TO - Mobile Navigation Menu]. html, css, javascript
** [https://www.w3schools.com/howto/howto_js_topnav_responsive.asp How TO - Responsive Top Navigation]
* [https://codeconvey.com/mobile-navigation-menu-css/ Mobile Navigation Menu using HTML & CSS].
* [https://blog.teamtreehouse.com/create-an-absolute-basic-mobile-css-responsive-navigation-menu Create an Absolute Basic Mobile CSS Responsive Navigation Menu] including a demo and source code.
* Some random videos
** [https://youtu.be/ZYV6dYtz4HA 17: How to Make a Website Responsive | Learn HTML and CSS | HTML Tutorial | Basics of CSS] no free source code
** [https://youtu.be/68O6eOGAGqA Responsive CSS Grid Tutorial]
** [https://youtu.be/Q5m8cCGdiBo How to Make Images Responsive in HTML & CSS // Responsive Web Design Tutorial]. html files: '''viewport''', css files: '''@media screen and (max-width: 500px)'''
** [https://youtu.be/gXkqy0b4M5g Responsive Navigation Bar Tutorial | HTML CSS JAVASCRIPT]
== Test mobile-friendliness ==
https://www.google.com/webmasters/tools/mobile-friendly/
== How to emulate a mobile device in a desktop browser ==
https://www.digitalcitizen.life/emulate-mobile-device-desktop-browser
= [http://getbootstrap.com/ Twitter Bootstrap] =
== Tutorial ==
* http://www.w3resource.com/twitter-bootstrap/
* [https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBPw1sFodruZUPheWVKchlM Youtube from thenewBoston]
== Examples ==
* [http://getbootstrap.com/getting-started/#examples Examples]
* http://user2014.stat.ucla.edu/
* http://projecttemplate.net/
== Plugins ==
* http://getbootstrap.com/javascript/ Take a look at ScrollSpy.
* http://jquery-plugins.net/tag/sticky-scroll
* http://bigspotteddog.github.io/ScrollToFixed/
= Misc =
== Design a Stunning Website ==
[https://www.makeuseof.com/design-stunning-websites/ Want to Design a Stunning Website? 10 Tips to Impress Your Client]
== Portfolio Website ==
[https://www.makeuseof.com/create-portfolio-website/ How to Create a Portfolio Website From Scratch]
== Cheatsheet ==
https://hostingfacts.com/html-cheat-sheet/ (23 pages in pdf or 1 in png)
== Show modified date ==
<pre>
$ cat test.html
<!DOCTYPE html>
<html>
  <body>
      <script>
function myFunction() {
  update = new Date(document.lastModified)
  theMonth = update.getMonth() + 1
  theDate = update.getDate()
  theYear = update.getFullYear()
  document.writeln("<I>Last updated:" + theMonth + "/" + theDate + "/" + theYear + "</I>")
}
      </script>
      This file was <script>myFunction();</script>
  </body>
</html>
</pre>
To change the file's modified date attribute on Linux, use the '''touch''' command, for example, '''touch -mt200801120000 test.html'''
== Intro to Graphic Design ==
https://www.udemy.com/introduction-to-graphic-design/?dtcode=onMH2sD3bj21
== Table of contents/TOC ==
* Manual method. See an example [https://www.tipsandtricks-hq.com/simple-table-of-contents-toc-using-pure-html-and-css-code-9217 Simple Table of Contents (ToC) Using Pure HTML and CSS Code].
** add '''<a name = "top"> </a>'''
** add '''<a href="#top"> link to top </a>'''
* [https://css-tricks.com/automatic-table-of-contents/ Automatic Table of Contents]
* [https://stackoverflow.com/a/187946 Is there a JavaScript solution to generating a “table of contents” for a page?]
** html and js code at [https://codepen.io/scheinercc/pen/KEowRK here]
** For html, add a line '''<script src="toc.js"></script>'''
** For js, saving it to a file '''toc.js'''
** No CSS is involved so the TOC is located at the top of the page
== Identify font in a web page ==
* [http://www.makeuseof.com/tag/4-ways-quickly-identify-favorite-web-page-fonts/ 4 Ways To Quickly Identify Your Favorite Web Page Fonts]. For example, it looks like [https://www.linux.com/learn/how-build-email-server-ubuntu-linux this site] is using [https://www.fontsquirrel.com/fonts/open-sans Open Sans] according to the Chrome Developer Tools.
* [https://www.makeuseof.com/how-to-find-webpages-font-inspect-element-tool-browser-extensions/ How to Find a Webpage's Font Using the Inspect Element Tool and Browser Extensions]
== Font size ==
* [https://stackoverflow.com/a/701742 Size of font in CSS with slash]. It means font-size/line-height.
:<syntaxhighlight lang='html'>
p {
  font: 12pt/14pt sans-serif
}
</syntaxhighlight>
* [https://www.w3schools.com/CSSref/pr_font_font-family.asp CSS font-family Property]. The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
* [https://www.w3schools.com/cssref/pr_dim_line-height.asp CSS line-height Property]
== Fonts, icons ==
* [https://stackoverflow.com/questions/884177/how-can-i-determine-what-font-a-browser-is-actually-using-to-render-some-text How can I determine what font a browser is actually using to render some text?] Firefox is easy.
* http://icoconvert.com/
* http://fortawesome.github.io/Font-Awesome/
* Kubuntu icons [https://github.com/franksouza183/EvolvereSuit/tree/master/icons EvolvereSuit]
* https://fonts.google.com/
* http://fontawesome.io/icons/ and [http://r-addict.com/2016/10/03/Rocker-Presentation-eRka10.html here]
* [http://www.makeuseof.com/tag/icon-fonts-awesome-site/ Icon Fonts Are Awesome for Your Site: Here’s Why]
* [https://www.iconfinder.com/ iconfinder] Free
[[File:Font-icon.png|350px]]
<syntaxhighlight lang='html'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MUO Icon Fonts</title>
<link rel="stylesheet" type="text/css"
                  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html {
font-family: helvetica, arial;
}
            @keyframes move {
              from { margin-left: 0; }
              to { margin-left: 400px; }
            }
            .bike {
              animation-name: move;
              animation-duration: 4s;
            }
</style>
</head>
<body>
        <i class="fa fa-cog"></i> My First Icon
        <i class="fa fa-battery-0 fa-lg"></i>
        <i class="fa fa-battery-1 fa-2x"></i>
        <i class="fa fa-battery-2 fa-3x"></i>
        <i class="fa fa-battery-3 fa-4x"></i>
        <i class="fa fa-battery-4 fa-5x"></i>
        <i class="fa fa-refresh fa-spin fa-3x"></i>
        <i class="fa fa-motorcycle fa-5x bike"></i>
</body>
</html>
</syntaxhighlight>
== Editor ==
* [http://brackets.io/ Brackets]
* [http://plnkr.co/ Plunker] online editor
* https://codepen.io/
== Free images ==
* [http://www.lifehack.org/573898/10-best-sites-that-offer-gorgeous-free-images-for-blogs 10 Best Sites That Offer Gorgeous Free Images for Blogs]
== Optimize images ==
[https://opensource.com/article/21/12/optimize-web-images-linux My favorite Linux commands for optimizing web images]
== HTML symbols/icons ==
* [https://html-css-js.com/html/character-codes/icons/ Icons and Symbols HTML Character Codes]
* [https://www.toptal.com/designers/htmlarrows/symbols/ HTML Symbols, Entities and Codes — Toptal Designers]
== Free icons ==
* https://www.fatcow.com/free-icons
* https://www.flaticon.com/
* https://icons8.com/icon/
* https://www.canva.com/learn/free-icons-download/
* https://iconduck.com/
* https://bioicons.com/ free science illustrations for biologists, chemists, machine learning
Convert/crop an image to round shape, or different resolutions
* https://www298.lunapic.com/editor/?action=crop (you can manually select an area)
* http://icoconvert.com/ (you cannot select an area)
== Design logos, banners, book covers, icons, covers, menus, ... ==
[https://www.makeuseof.com/tag/things-create-with-canva/ 10 Things You Can Create With Canva With Zero Effort]
== Cookies ==
An example to inform visitors https://www.jamescoyle.net/how-to/116-simple-apache-reverse-proxy-example
https://www.cookielaw.org/the-cookie-law/
== DAP: Digital Analytics Program ==
* https://digital.gov/dap/
* https://digital.gov/2015/03/04/what-is-the-digital-analytics-program-dap/
== [https://en.wikipedia.org/wiki/Web_analytics Web analytics] ==
[https://en.wikipedia.org/wiki/List_of_web_analytics_software List of web analytics software] such as AWStats
== Section 508 compliant ==
* https://training.cit.nih.gov/class_details.aspx?cId=NIHCIT-AT100
* https://training.cit.nih.gov/class_details.aspx?cId=NIHCIT-AT173
* https://training.cit.nih.gov/class_details.aspx?cId=NIHCIT-AT171
* Random examples of personal website including publications: [https://www.niehs.nih.gov/research/atniehs/labs/bb/staff/peddada/index.cfm Peddada], [https://www.niaid.nih.gov/about/brb-staff-nason Nason]
* An example is to add alt="" to provide an [https://www.w3schools.com/TAGS/att_img_alt.asp alternative text for an image]. Note that '''alt''' attribute is not allowed for an '''a''' element.
<syntaxhighlight lang='html'>
<a href="abc.png"><img src="abc.png" alt="">Visit me</a>
</syntaxhighlight>
* Section 508 compliance tools for this purpose include:
** [https://wave.webaim.org/ WAVE Web Accessibility Evaluation Tools (webaim.org)]
** [https://www.deque.com/axe/?utm_term=axe%20tool%20for%20accessibility&utm_campaign=Search+-+axe+Pro+-+Branded&utm_source=adwords&utm_medium=ppc&hsa_src=g&hsa_ad=431336436914&hsa_tgt=kwd-1479698275104&hsa_mt=e&hsa_ver=3&hsa_acc=7854167720&hsa_kw=axe%20tool%20for%20accessibility&hsa_grp=108623642548&hsa_cam=6769485255&hsa_net=adwords&gclid=EAIaIQobChMI05jsvt6TgQMV8UByCh2irQmDEAAYAiAAEgLdTfD_BwE Axe Accessibility Testing Tools]
** [https://www.ssa.gov/accessibility/andi/help/install.html ANDI — Accessibility Testing Tool — Install (ssa.gov)]
== How to force pdf files to open or downloaded in browser  ==
https://stackoverflow.com/questions/6293893/how-to-force-files-to-open-in-browser-instead-of-download-pdf
== Examples of R package html page ==
* [https://dceg.cancer.gov/tools/risk-assessment/bcra BCRA R Package] (linked from [https://dceg.cancer.gov/about/staff-directory/biographies/K-N/gail-mitchell Mitchell H. Gail] page
== Display Chinese characters ==
Include the following in '''head''' tag. See [https://stackoverflow.com/a/20670191 how to display chinese character in HTML]
<pre>
<meta charset="utf-8">
</pre>
== Acute accent character ==
* https://en.wikipedia.org/wiki/Acute_accent
* [https://stackoverflow.com/a/3812974 Special characters like “e” with accent acute over it in HTML page?]
== What is a URL ==
[https://www.makeuseof.com/what-is-a-url/ What Is a URL, and How Can You Edit One?]
== Spaces in URL links ==
[https://www.arclab.com/en/kb/htmlcss/uri-url-encoding-spaces-in-links-href-img-src.html Can I use spaces (blank space chars) in links (link href), images (img src) and other URLs?] Ans: Replace each space character with '''%20'''
== URL Encode/decode (such as Chinese characters) using UTF-8 encoding ==
* To copy URL with UTF-8 encoding, [https://stackoverflow.com/questions/18176661/copying-a-utf-8-url-from-browsers-address-bar-gives-only-the-ugly-encoded-one adding a space at the end of URL in the address bar] before copying. It works.
* bing: url decode
* https://www.urldecoder.org/
* https://www.url-encode-decode.com/
* R: utils::URLdecode()
{{Pre}}
> URLdecode("https://www.worldjournal.com/5935170/article-%E8%97%A5%E8%8D%89%E9%A4%8A%E7%94%9F%E8%A1%93-%E6%A1%82%E8%8A%B1%E3%80%81%E8%91%A1%E8%90%84%E6%9F%9A%E7%B2%BE%E6%B2%B9-%E7%B4%93%E8%A7%A3%E9%AB%94%E6%AA%A2%E7%84%A6%E6%85%AE/")
[1] "https://www.worldjournal.com/5935170/article-藥草養生術-桂花、葡萄柚精油-紓解體檢焦慮/"
> urls <- c("https://zh.wikipedia.org/zh-tw/%E8%A1%80%E6%B8%85%E7%B4%A0",
            "https://example.com/%E8%A1%80%E6%B8%85%E7%B4%A0")
> sapply(urls, URLdecode, USE.NAMES = FALSE)
</pre>
== Check websites for broken links ==
* [https://wummel.github.io/linkchecker/ LinkChecker]
* bash script [[Linux_Programming#Find_broken_links_in_a_website_by_lynx_-traversal|lynx_traversal]]
== Calculate page loading time ==
[https://stackoverflow.com/questions/26093076/get-pageload-time-using-command-line-linux Get pageload time using command line]. This works on local servers too.
<syntaxhighlight lang='bash'>
$ time wget -pq --no-cache --delete-after http://10.42.0.66/wiki/index.php/C
real 4m30.402s
user 0m0.036s
sys 0m0.032s
</syntaxhighlight>
It seems apache/mediawiki have a cache system. If I repeat the testing on the same page, it will be fast. But if I test on a new page, it will be slow again.
We can also use curl. [https://serverfault.com/questions/124952/testing-a-website-from-linux-command-line Testing a website from Linux command line]
<syntaxhighlight lang='bash'>
$ curl --trace-time -o /dev/null http://10.42.0.66/wiki/index.php/Virtualbox
  % Total    % Received % Xferd  Average Speed  Time    Time    Time  Current
                                Dload  Upload  Total  Spent    Left  Speed
100  145k    0  145k    0    0  5161      0 --:--:--  0:00:28 --:--:-- 32638
</syntaxhighlight>
== Code beautify/validator/formatter ==
* https://codebeautify.org/htmlviewer/
* https://www.freeformatter.com/html-formatter.html (3 spaces for identation)
* Google: reformat html online
== Print with PDF ==
Tested on [https://dev.to/domysee/setting-up-a-reverse-proxy-with-nginx-and-docker-compose-29jg this page]
* [https://www.printfriendly.com/ Print Friendly]. Format may be changed. Page font size looks good.
* [https://www.web2pdfconvert.com/ web2pdfconvert]. Format may be kept. Page font size is large. Article becomes 1.5x or double spaced.
* http://pdfmyurl.com. Not good.
* [https://www.sitepoint.com/css-printer-friendly-pages/ How to Create Printer-friendly Pages with CSS]
== Google Analytics ==
[https://opensourceforu.com/2019/10/all-that-you-can-do-with-google-analytics-and-more/ All That You Can Do with Google Analytics, and More]
= Chrome browser =
== Developer Tools ==
== HTML 5 outliner ==
* [https://en.wikipedia.org/wiki/Outliner Outliner] from Wikipedia. Some common file formats include XML, HTML, OPML, OML,RDF.
* https://gsnedders.html5.org/outliner/
* https://addons.mozilla.org/en-US/firefox/addon/html5_outliner/
* https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo
== Inspect ==
* Google Chrome: right click -> Inspect
** https://developers.google.com/web/tools/chrome-devtools/, https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
** [https://superuser.com/questions/4640/what-is-the-inspect-element-feature-in-google-chrome Inspect Element is Chrome's version of Firebug].
* Firefox: right click -> Inspect Element. See [https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector Open the Inspector].
== Extensions ==
* [https://wpastra.com/chrome-developer-extensions/ 28 of the Best Chrome Extensions for Developers in 2022]
* [https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm Web Developer] by chrispederick.com
* [https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce CSSViewer]
* [https://themesgrove.com/best-chrome-extensions-for-web-developers/ 13 Best Chrome Extensions for Web Developers]
* [https://www.lambdatest.com/blog/27-best-chrome-extensions-for-developers/ Best Chrome Extensions for Developers and Designers]
= CGI/Perl =
* [http://www.elated.com/articles/your-first-cgi-script/ hello.cgi] and [http://www.elated.com/articles/form-validation-with-perl-and-cgi/ form validation]
* [http://www.amazon.com/CGI-Programming-101-Second-Edition/dp/0966942612/ref=sr_1_2?ie=UTF8&qid=1353525140&sr=8-2&keywords=cgi+programming+with+perl CGI Programming 101]
* http://perlmeme.org/tutorials/cgi_form.html
* http://www.rebol.com/docs/cgi2.html
* http://info.eps.surrey.ac.uk/FAQ/cgitutor/cgi3.html
* [https://opensource.com/article/17/12/cgi-scripts How to generate webpages using CGI scripts]
On Ubuntu, the CGI script should be placed in '''/usr/lib/cgi-bin''' folder.
<pre>
$ ls -l /usr/lib/cgi-bin/hello.cgi
-rwxr-xr-x 1 root root 139 2012-11-21 12:19 /usr/lib/cgi-bin/hello.cgi
</pre>
Notice that mode is 755 for the executable file. The script
<pre>
$ cat /usr/lib/cgi-bin/hello.cgi
#!/usr/bin/perl
print "Content-type: text/html\n\n";
print <<END_HTML;
<html>
<head></head>
<body>Hello, World!</body>
</html>
END_HTML
</pre>
Open a web browser and enter http://localhost/cgi-bin/hello.cgi.
If the cgi was used in html form, the html code should look like
<pre>
<FORM ACTION="/cgi-bin/mycgi.pl">
favorite color: <INPUT name="favecolor">
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>
</pre>
== CGIwithR ==
* http://www.omegahat.net/CGIwithR/
* [https://warwick.ac.uk/fac/sci/statistics/staff/academic-research/firth/software/cgiwithr/cgiwithr-overview.pdf Paper]

Latest revision as of 19:29, 14 May 2024

Some useful HTML tags about form

http://www.w3schools.com/html/html_forms.asp

form

<form action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>

radio button label and input

<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>

dropdown list select and option

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Let users choose which plot you want to show

Upload file using input

<form action="demo_form.asp">
  Select a file: <input type="file" name="img">
  <input type="submit">
</form>

map

HTML <map> Tag

div

<div style="color:#0000FF">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>

tabs

Full Page Tabs. Make sure to include a big div to wrap individual divs (tabs).

id attribute

https://www.w3schools.com/hTML/html_id.asp 

<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>

<h1 id="myHeader">My Header</h1>

CSS and JS

Link CSS and Js Files With an HTML File

  • To link a CSS file with your HTML file, you have to write the next script on your HTML file inside the head tag
  • To link a Js file with your HTML, you only have to add the source of the script inside the body tag or outside; it doesn’t matter.

Section tag, outline, layout

PHP

Simple examples

mywebpage.php 

<?php
echo "Today is " . date('Y-m-d H:i:s');

Differences between a standard HTML doc and a PHP doc

  • PHP scripts should be saved with the .php file extension.
  • You place PHP code within <?php and ?> tags, normally withink the context of some HTML.
  • PHP is a server-side technology. So PHP scripts must be run on a PHP-enabled Web server. This means that PHP must be run through a URL (i.e. http://yourdomain/mypage.php).

If the php source code is 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<?php
# This script does nothing much.

echo '<p>This is a line of text.<br />This is another line of text.</p>';

/*
echo 'This line will not be executed.';
*/

echo "<p>Now I'm done.</p>"; // End of PHP code.

?>
</body>
</html>

then when we view the page source from a web browser, it will look like 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<p>This is a line of text.<br />This is another line of text.</p><p>Now I'm done.</p>
</body>
</html>

Resource

Debugging techniques

  • Run PHP scripts through a URL; i.e. it must be requested through http://something.
  • Know what version of PHP you're running; run phpinfo.php to confirm.
  • Make sure display_errors is on. This is related to PHP configuration setting.
  • CHeck the HTML source code.
  • Trust the error message.

Quick sheet

  • print_r($_SERVER); print 'ABCD';
  • Use /* and */ for comments
  • Variables are case-sensitive!
  • Constants define('PI', 3.14);
  • Strings: "Hello, $first_name", "I said \"How are you?\"". Note that backslash is used to escape the quotation.
  • Arrays can be used by using either indexed array or associative array. For indexed arrays, the key is 0,1,2,3,... and for associative arrays, the key is a string. For example, $name[0]='Don' and $state['VT'] = 'Vermont'.
  • Single quotation marks are treated literally; items within double quotation marks are extrapolated. This means that within double quotation marks, a variable's name is replaced with its value, but the same is not true for single quotation marks.
  • XHTML are different from HTML
    • the code needs to be in all lowercase letters
    • every tag attribute must be enclosed in quotes
    • For example, <INPUT TYPE=TEXT NAME=address SIZE=40> in HTML becomes <input text="text" name="address" size="40"> in XHTML
  • For avoiding security problems in form, use PHP functions like htmlspecialchars(), htmlentities(), strip_tags().
    • htmlspecialchars() converts certain HTMLM tags into their entity versions. The entity version appears in the output but isn't rendered.
    • htmlentities() turns all HTML tags into their entity versions.
    • strip_tags() removes all HTML and PHP tags.
  • foreach() {}
  • abcd

PHP, form and POST method

PHP form handling
# index.php welcome.php
1. 
<html>
<body>

<form action="welcome.php" method="post">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>

</body>
</html>

 <html>
 <body>

 Welcome <?php echo $_POST["fname"]; ?>!<br />
 You are <?php echo $_POST["age"]; ?> years old.

 </body>
 </html>

The 'action' attribute in <form> defines an absolute or a relative URL. That is, the action could be pointing to an asp, cgi page or something like "mailto:[email protected]".

PHP, form and GET method

GET method
index.php welcome.php 
<form action="welcome.php" method="get">
Name: <input type="text" name="fname" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>

Welcome <?php echo $_GET["fname"]; ?>.<br />
You are <?php echo $_GET["age"]; ?> years old!

GET, the default, will send the form input in an URL, whereas POST sends it in the body of the submission. The latter method means you can send larger amounts of data, and that the URL of the form results doesn't show the encoded form.

MySQL basic operations

  • Log into root
$ mysql -u root -h myserver-sever.com -p
  • Create a new mysql database called demo
mysql> CREATE DATABASE demo;
  • create a new user and GRANT (add) privileges to a newly created user on all tables in the demo database.
CREATE USER 'user1'@'localhost' IDENTIFIED BY 'mypassword';
GRANT ALL ON demo.* TO 'user1'@'localhost';

OR 

mysql> GRANT ALL ON demo.* TO user1@localhost IDENTIFIED BY 'mypassword';
  • How to connect to the demo database on local/remote MySQL server?
$ mysql -u user1 -h mysql.server.com -p demo
  • To remove an account
DROP USER 'user1'@'localhost'
  • Create a table on the demo database
mysql> USE demo;
mysql> DROP TABLE Employee;

mysql> CREATE TABLE Employee (
    ->     Name VARCHAR(50),
    ->     Phone VARCHAR(15)
    -> );
Query OK, 0 rows affected (0.21 sec)

mysql> Show tables;
mysql> Describe Employee;
+-------+-------------+------+-----+---------+-------+
| Field | Type        | Null | Key | Default | Extra |
+-------+-------------+------+-----+---------+-------+
| Name  | varchar(50) | YES  |     | NULL    |       |
| Phone | varchar(15) | YES  |     | NULL    |       |
+-------+-------------+------+-----+---------+-------+
2 rows in set (0.03 sec)

mysql> INSERT INTO Employee (Name, Phone) VALUES ('Joe Wang', '666 2323');
Query OK, 1 row affected (0.04 sec)

mysql> INSERT INTO Employee (Name) VALUES ('John Doe');
Query OK, 1 row affected (0.02 sec)

mysql> INSERT INTO Employee (Name, Phone) VALUES ('John Doe', NULL);
Query OK, 1 row affected (0.01 sec)

mysql> Select * from Employee;
+----------+----------+
| Name     | Phone    |
+----------+----------+
| Joe Wang  | 666 2323 |
| John Doe | NULL     |
| John Doe | NULL     |
+----------+----------+

Username/password

  1. http://taichi.selfip.net:81/lang/php/w3/login/login.php

File upload

Need to change the folder permission/property. See here.

  • chmod -R 777 FOLDERNAME
  • sudo usermod www-data --apend --groups GROUPNAME

where GROUPNAME is the group name of the folder and www-data is the user that runs the web server.

  • sudo chown -R .www-data FOLDERNAME

where the dot means no change for the owner's name. We just change the group name. It is also helpful to do chmod -R 775 FOLDERNAME.

  • just edit /etc/group file. See the link above.

Examples:

  1. http://taichi.selfip.net:81/lang/php/w3/uploadphp/
  2. http://taichi.selfip.net:81/lang/php/xqto/index.php

Login/out + File upload

The following test page combines the ideas of login/out and file upload.

  1. http://taichi.selfip.net:81/lang/php/w3/loginuploadphp/loginupload.php

PHP and database

Books

http://www.amazon.com/Head-First-MySQL-Lynn-Beighley/dp/0596006306/ref=tmm_pap_title_0?ie=UTF8&qid=1360359135&sr=8-2

Modules

sudo dpkg --get-selections | grep -i php

CSS

Three Styles

  1. Store an exteranl style sheet in a separate file
  2. Embed an internal style sheet inside an HTML document (inside the <head> section your page).
  3. Inline style

Anatomy of a Rule

selector { property: value }

Example: 

  h1 { text-align: center;
       color: blue }

Web colors

Normally hex form requires 6 digits but the short form only requires 3 digits. For example, #09C is the same as #0099CC.

(Outdated) Google chrome devtools provides a color magnifier which can be used to identify the color code of a specific pixel on the screen. Here is a gif showing the process to get the color picker.

  1. Open devtools
  2. Right click on a website and choose 'inspect'
  3. Click somewhere having class. The style definition will be shown in a small panel
  4. If color was used somewhere, there should be a small square showing the defined color. Click the square.
  5. Now if we move the cursor to the website, a magnifier will be shown up

Important Tools

http://www.lifehack.org/314802/10-best-tools-optimize-and-audit-css-code

  • Notepad++ - color coded formatting
  • Stylizer - CSS editor with preview and has 8 built-in browsers
  • Blueprint - CSS framework
  • ProCSSor - cleans and organizes your css the way you want it
  • CSS Compressor - reducing the size of your CSS code and helping your website to load much faster as a result

Simple example

<style>
body
{
    background-color:#d0e4fe;
}
h1
{
    color:orange;
    text-align:center;
}
p
{
    font-family:"Times New Roman";
    font-size:20px;
}
</style>

To insert a CSS in an html file, use 

<link rel="stylesheet" type="text/css" href="mystyle.css">

href

Links/Anchor

CSS Links 

a {
  color: hotpink;
}

Margin vs padding

Add vertical space

https://stackoverflow.com/a/9141084

What’s the difference between comma separated identifiers and space separated?

Overlapping elements

CSS position -> overlapping elements

Float an image

CSS floating -> How Elements Float

Text in Transparent Box

CSS Image Opacity

@media, @keyframes, @-webkit-keyframes ...

CSS Reference

Tile style

Javascript

Collapsibles/Accordion

How TO - Collapsibles/Accordion

Search box

jQuery

To use the javascript in the HTML code, we can grab the script from internet, local directory or defined in the html. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
          effect: 'random'
    });
</script>

Image slider/carousel/lightbox/gallery

It seems if we want to create lightbox image gallery, we need to create thumbnails first. We can skip creating thumbnail images if we don't need javascript and lightbox effect.

Tree

Responsive Design

Test mobile-friendliness

https://www.google.com/webmasters/tools/mobile-friendly/

How to emulate a mobile device in a desktop browser

https://www.digitalcitizen.life/emulate-mobile-device-desktop-browser

Twitter Bootstrap

Tutorial

Examples

Plugins

Misc

Design a Stunning Website

Want to Design a Stunning Website? 10 Tips to Impress Your Client

Portfolio Website

How to Create a Portfolio Website From Scratch

Cheatsheet

https://hostingfacts.com/html-cheat-sheet/ (23 pages in pdf or 1 in png)

Show modified date

$ cat test.html
<!DOCTYPE html>
<html>
   <body>
      <script>
	function myFunction() {
	  update = new Date(document.lastModified)
	  theMonth = update.getMonth() + 1
	  theDate = update.getDate()
	  theYear = update.getFullYear()
	  document.writeln("<I>Last updated:" + theMonth + "/" + theDate + "/" + theYear + "</I>")
	}
      </script>
      This file was <script>myFunction();</script>

   </body>
</html>

To change the file's modified date attribute on Linux, use the touch command, for example, touch -mt200801120000 test.html

Intro to Graphic Design

https://www.udemy.com/introduction-to-graphic-design/?dtcode=onMH2sD3bj21

Table of contents/TOC

Identify font in a web page

Font size

p { 
  font: 12pt/14pt sans-serif
}

Fonts, icons

Font-icon.png 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>MUO Icon Fonts</title>
		<link rel="stylesheet" type="text/css" 
                  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
			html {
				font-family: helvetica, arial;
			}

            @keyframes move {
              from { margin-left: 0; }
              to { margin-left: 400px; }
            }

            .bike {
              animation-name: move;
              animation-duration: 4s;
            }
		</style>
	</head>
	<body>
        <i class="fa fa-cog"></i> My First Icon

        <i class="fa fa-battery-0 fa-lg"></i>
        <i class="fa fa-battery-1 fa-2x"></i>
        <i class="fa fa-battery-2 fa-3x"></i>
        <i class="fa fa-battery-3 fa-4x"></i>
        <i class="fa fa-battery-4 fa-5x"></i>

        <i class="fa fa-refresh fa-spin fa-3x"></i>

        <i class="fa fa-motorcycle fa-5x bike"></i>
	</body>
</html>

Editor

Free images

Optimize images

My favorite Linux commands for optimizing web images

HTML symbols/icons

Free icons

Convert/crop an image to round shape, or different resolutions

Design logos, banners, book covers, icons, covers, menus, ...

10 Things You Can Create With Canva With Zero Effort

Cookies

An example to inform visitors https://www.jamescoyle.net/how-to/116-simple-apache-reverse-proxy-example

https://www.cookielaw.org/the-cookie-law/

DAP: Digital Analytics Program

Web analytics

List of web analytics software such as AWStats

Section 508 compliant

<a href="abc.png"><img src="abc.png" alt="">Visit me</a>

How to force pdf files to open or downloaded in browser

https://stackoverflow.com/questions/6293893/how-to-force-files-to-open-in-browser-instead-of-download-pdf

Examples of R package html page

Display Chinese characters

Include the following in head tag. See how to display chinese character in HTML 

<meta charset="utf-8">

Acute accent character

What is a URL

What Is a URL, and How Can You Edit One?

Spaces in URL links

Can I use spaces (blank space chars) in links (link href), images (img src) and other URLs? Ans: Replace each space character with %20

URL Encode/decode (such as Chinese characters) using UTF-8 encoding

> URLdecode("https://www.worldjournal.com/5935170/article-%E8%97%A5%E8%8D%89%E9%A4%8A%E7%94%9F%E8%A1%93-%E6%A1%82%E8%8A%B1%E3%80%81%E8%91%A1%E8%90%84%E6%9F%9A%E7%B2%BE%E6%B2%B9-%E7%B4%93%E8%A7%A3%E9%AB%94%E6%AA%A2%E7%84%A6%E6%85%AE/")
[1] "https://www.worldjournal.com/5935170/article-藥草養生術-桂花、葡萄柚精油-紓解體檢焦慮/"

> urls <- c("https://zh.wikipedia.org/zh-tw/%E8%A1%80%E6%B8%85%E7%B4%A0",
            "https://example.com/%E8%A1%80%E6%B8%85%E7%B4%A0")
> sapply(urls, URLdecode, USE.NAMES = FALSE)

Check websites for broken links

Calculate page loading time

Get pageload time using command line. This works on local servers too. 

$ time wget -pq --no-cache --delete-after http://10.42.0.66/wiki/index.php/C
real	4m30.402s
user	0m0.036s
sys	0m0.032s

It seems apache/mediawiki have a cache system. If I repeat the testing on the same page, it will be fast. But if I test on a new page, it will be slow again.

We can also use curl. Testing a website from Linux command line 

$ curl --trace-time -o /dev/null http://10.42.0.66/wiki/index.php/Virtualbox
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  145k    0  145k    0     0   5161      0 --:--:--  0:00:28 --:--:-- 32638

Code beautify/validator/formatter

Print with PDF

Tested on this page

Google Analytics

All That You Can Do with Google Analytics, and More

Chrome browser

Developer Tools

HTML 5 outliner

Inspect

Extensions

CGI/Perl

On Ubuntu, the CGI script should be placed in /usr/lib/cgi-bin folder. 

$ ls -l /usr/lib/cgi-bin/hello.cgi
-rwxr-xr-x 1 root root 139 2012-11-21 12:19 /usr/lib/cgi-bin/hello.cgi

Notice that mode is 755 for the executable file. The script 

$ cat /usr/lib/cgi-bin/hello.cgi
#!/usr/bin/perl

print "Content-type: text/html\n\n";

print <<END_HTML;
<html>
<head></head>
<body>Hello, World!</body>
</html>
END_HTML

Open a web browser and enter http://localhost/cgi-bin/hello.cgi.

If the cgi was used in html form, the html code should look like 

<FORM ACTION="/cgi-bin/mycgi.pl">
favorite color: <INPUT name="favecolor">
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

CGIwithR

Retrieved from "https://wiki.taichimd.us/index.php?title=Html&oldid=39449"