为初学者创建一个静态 HTML 网站?

为初学者创建一个静态 HTML 网站?

我的妻子想和她的朋友分享大量的旧学校照片。

她的一些朋友建议她使用 iCloud,但我知道我可以设置 Apache 和我的家庭互联网连接来提供这些照片 - 要么使用静态 IP 链接,要么最好使用我自己的域名。我可能会用我自己的域名来做这件事。

但我需要有关页面呈现方面的帮助。

我需要一些简单的方法来生成一个 HTML 文件,该文件将在每张学校图片的页面上显示缩略图,然后用户可以单击图片以查看其全尺寸并下载。

这里没有动态内容,没有视频,没有动画。它只是一个用于存放和分享老同学照片的单一用途网页。

我记得很多年前有一个名为“Netscape Communicator”的软件包,它可以让你创建一个像我描述的那样简单的网页,但现在我在存储库中找不到任何可以帮助我的东西。

请提出一个可以让我完成该过程的解决方案。

谢谢你,geo

答案1

可以相当轻松地创建包含一堆图像缩略图和链接的简单 HTML 文件。假设:

  • HTML 文件与图像位于同一目录
  • 所有图像都具有某些属性,这使得在命令行中循环它们变得容易(.jpg例如,所有扩展名为 的文件)。

    这样可以更轻松地为他们创建缩略图。您应该使用缩略图,这样人们就不会在打开您的页面时下载整套图片。

适应这个帖子

printf "%s\n" '<!DOCTYPE html><meta charset=utf-8><title>Images</title>' > images.html
mkdir thumbs
for i in *.jpg
do
    convert "$i" -thumbnail 100 "thumbs/$i"
    printf '<a href="%s"><img src="%s" alt="%s"></a>\n' "$i" "thumbs/$i" "$i"
done >> images.html

现在,images.html具有最低有效的 HTML5,可显示一组缩略图并链接到缩略图的图像。将您的 Apache 实例指向目录并根据需要提供服务。

您可能可以尝试用它制作一张表格或类似的东西,但这应该足够了。

使用来自以下图像的示例/usr/share/background

$ head images.html
<!DOCTYPE html><meta charset=utf-8><title>Images</title>
<a href="160218-deux-two_by_Pierre_Cante.jpg"><img src="thumbs/160218-deux-two_by_Pierre_Cante.jpg" alt="160218-deux-two_by_Pierre_Cante.jpg"></a>
<a href="Black_hole_by_Marek_Koteluk.jpg"><img src="thumbs/Black_hole_by_Marek_Koteluk.jpg" alt="Black_hole_by_Marek_Koteluk.jpg"></a>
<a href="Cielo_estrellado_by_Eduardo_Diez_Viñuela.jpg"><img src="thumbs/Cielo_estrellado_by_Eduardo_Diez_Viñuela.jpg" alt="Cielo_estrellado_by_Eduardo_Diez_Viñuela.jpg"></a>
<a href="clock_by_Bernhard_Hanakam.jpg"><img src="thumbs/clock_by_Bernhard_Hanakam.jpg" alt="clock_by_Bernhard_Hanakam.jpg"></a>
<a href="Dans_ma_bulle_by_Christophe_Weibel.jpg"><img src="thumbs/Dans_ma_bulle_by_Christophe_Weibel.jpg" alt="Dans_ma_bulle_by_Christophe_Weibel.jpg"></a>
<a href="Flora_by_Marek_Koteluk.jpg"><img src="thumbs/Flora_by_Marek_Koteluk.jpg" alt="Flora_by_Marek_Koteluk.jpg"></a>
<a href="Icy_Grass_by_Raymond_Lavoie.jpg"><img src="thumbs/Icy_Grass_by_Raymond_Lavoie.jpg" alt="Icy_Grass_by_Raymond_Lavoie.jpg"></a>
<a href="Night_lights_by_Alberto_Salvia_Novella.jpg"><img src="thumbs/Night_lights_by_Alberto_Salvia_Novella.jpg" alt="Night_lights_by_Alberto_Salvia_Novella.jpg"></a>
<a href="passion_flower_by_Irene_Gr.jpg"><img src="thumbs/passion_flower_by_Irene_Gr.jpg" alt="passion_flower_by_Irene_Gr.jpg"></a>

在此处输入图片描述

相关内容